@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
59 lines • 7.38 kB
JavaScript
import { Directive, HostListener } from '@angular/core';
import { TabFocusDirective } from '../tab/tab-focus.directive';
import * as i0 from "@angular/core";
import * as i1 from "./trap-focus.service";
/**
* Directive that keeps the focus inside the focusable child elements,
* also known as a _focus trap_.
*/
export class TrapFocusDirective extends TabFocusDirective {
constructor(elementRef, service) {
super(elementRef, service);
this.elementRef = elementRef;
this.service = service;
this.defaultConfig = { trap: true };
// @Input('cxTrapFocus')
this.config = {};
this.handleTrapDown = (event) => {
if (!!this.config.trap) {
this.moveFocus(event, 1 /* NEXT */);
}
};
this.handleTrapUp = (event) => {
if (!!this.config.trap) {
this.moveFocus(event, -1 /* PREV */);
}
};
}
/**
* Moves the focus of the element reference up or down, depending on the increment.
* The focus of the element is trapped to avoid it from going out of the group.
*
* @param event UIEvent that is used to get the target element. The event is blocked
* from standard execution and further bubbling.
* @param increment indicates whether the next or previous is focussed.
*/
moveFocus(event, increment) {
if (this.service.hasFocusableChildren(this.host)) {
this.service.moveFocus(this.host, this.config, increment, event);
}
}
}
TrapFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TrapFocusDirective, deps: [{ token: i0.ElementRef }, { token: i1.TrapFocusService }], target: i0.ɵɵFactoryTarget.Directive });
TrapFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: TrapFocusDirective, host: { listeners: { "keydown.arrowdown": "handleTrapDown($event)", "keydown.tab": "handleTrapDown($event)", "keydown.arrowup": "handleTrapUp($event)", "keydown.shift.tab": "handleTrapUp($event)" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TrapFocusDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TrapFocusService }]; }, propDecorators: { handleTrapDown: [{
type: HostListener,
args: ['keydown.arrowdown', ['$event']]
}, {
type: HostListener,
args: ['keydown.tab', ['$event']]
}], handleTrapUp: [{
type: HostListener,
args: ['keydown.arrowup', ['$event']]
}, {
type: HostListener,
args: ['keydown.shift.tab', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhcC1mb2N1cy5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2xheW91dC9hMTF5L2tleWJvYXJkLWZvY3VzL3RyYXAvdHJhcC1mb2N1cy5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFFNUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7OztBQUcvRDs7O0dBR0c7QUFFSCxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsaUJBQWlCO0lBc0J2RCxZQUNZLFVBQXNCLEVBQ3RCLE9BQXlCO1FBRW5DLEtBQUssQ0FBQyxVQUFVLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFIakIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixZQUFPLEdBQVAsT0FBTyxDQUFrQjtRQXZCM0Isa0JBQWEsR0FBb0IsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFFMUQsd0JBQXdCO1FBQ2QsV0FBTSxHQUFvQixFQUFFLENBQUM7UUFJdkMsbUJBQWMsR0FBRyxDQUFDLEtBQW9CLEVBQUUsRUFBRTtZQUN4QyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRTtnQkFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLGVBQWtCLENBQUM7YUFDeEM7UUFDSCxDQUFDLENBQUM7UUFJRixpQkFBWSxHQUFHLENBQUMsS0FBb0IsRUFBRSxFQUFFO1lBQ3RDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFO2dCQUN0QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssZ0JBQWtCLENBQUM7YUFDeEM7UUFDSCxDQUFDLENBQUM7SUFPRixDQUFDO0lBRUQ7Ozs7Ozs7T0FPRztJQUNPLFNBQVMsQ0FBQyxLQUFjLEVBQUUsU0FBaUI7UUFDbkQsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNoRCxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FDcEIsSUFBSSxDQUFDLElBQUksRUFDVCxJQUFJLENBQUMsTUFBTSxFQUNYLFNBQVMsRUFDVCxLQUFnQixDQUNqQixDQUFDO1NBQ0g7SUFDSCxDQUFDOzsrR0E5Q1Usa0JBQWtCO21HQUFsQixrQkFBa0I7MkZBQWxCLGtCQUFrQjtrQkFEOUIsU0FBUztnSUFTUixjQUFjO3NCQUZiLFlBQVk7dUJBQUMsbUJBQW1CLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUM1QyxZQUFZO3VCQUFDLGFBQWEsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFTdkMsWUFBWTtzQkFGWCxZQUFZO3VCQUFDLGlCQUFpQixFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDMUMsWUFBWTt1QkFBQyxtQkFBbUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1PVkVfRk9DVVMsIFRyYXBGb2N1c0NvbmZpZyB9IGZyb20gJy4uL2tleWJvYXJkLWZvY3VzLm1vZGVsJztcbmltcG9ydCB7IFRhYkZvY3VzRGlyZWN0aXZlIH0gZnJvbSAnLi4vdGFiL3RhYi1mb2N1cy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgVHJhcEZvY3VzU2VydmljZSB9IGZyb20gJy4vdHJhcC1mb2N1cy5zZXJ2aWNlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgdGhhdCBrZWVwcyB0aGUgZm9jdXMgaW5zaWRlIHRoZSBmb2N1c2FibGUgY2hpbGQgZWxlbWVudHMsXG4gKiBhbHNvIGtub3duIGFzIGEgX2ZvY3VzIHRyYXBfLlxuICovXG5ARGlyZWN0aXZlKCkgLy8gc2VsZWN0b3I6ICdbY3hUcmFwRm9jdXNdJ1xuZXhwb3J0IGNsYXNzIFRyYXBGb2N1c0RpcmVjdGl2ZSBleHRlbmRzIFRhYkZvY3VzRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHJvdGVjdGVkIGRlZmF1bHRDb25maWc6IFRyYXBGb2N1c0NvbmZpZyA9IHsgdHJhcDogdHJ1ZSB9O1xuXG4gIC8vIEBJbnB1dCgnY3hUcmFwRm9jdXMnKVxuICBwcm90ZWN0ZWQgY29uZmlnOiBUcmFwRm9jdXNDb25maWcgPSB7fTtcblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93ZG93bicsIFsnJGV2ZW50J10pXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24udGFiJywgWyckZXZlbnQnXSlcbiAgaGFuZGxlVHJhcERvd24gPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICBpZiAoISF0aGlzLmNvbmZpZy50cmFwKSB7XG4gICAgICB0aGlzLm1vdmVGb2N1cyhldmVudCwgTU9WRV9GT0NVUy5ORVhUKTtcbiAgICB9XG4gIH07XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5hcnJvd3VwJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5zaGlmdC50YWInLCBbJyRldmVudCddKVxuICBoYW5kbGVUcmFwVXAgPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICBpZiAoISF0aGlzLmNvbmZpZy50cmFwKSB7XG4gICAgICB0aGlzLm1vdmVGb2N1cyhldmVudCwgTU9WRV9GT0NVUy5QUkVWKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgcHJvdGVjdGVkIHNlcnZpY2U6IFRyYXBGb2N1c1NlcnZpY2VcbiAgKSB7XG4gICAgc3VwZXIoZWxlbWVudFJlZiwgc2VydmljZSk7XG4gIH1cblxuICAvKipcbiAgICogTW92ZXMgdGhlIGZvY3VzIG9mIHRoZSBlbGVtZW50IHJlZmVyZW5jZSB1cCBvciBkb3duLCBkZXBlbmRpbmcgb24gdGhlIGluY3JlbWVudC5cbiAgICogVGhlIGZvY3VzIG9mIHRoZSBlbGVtZW50IGlzIHRyYXBwZWQgdG8gYXZvaWQgaXQgZnJvbSBnb2luZyBvdXQgb2YgdGhlIGdyb3VwLlxuICAgKlxuICAgKiBAcGFyYW0gZXZlbnQgVUlFdmVudCB0aGF0IGlzIHVzZWQgdG8gZ2V0IHRoZSB0YXJnZXQgZWxlbWVudC4gVGhlIGV2ZW50IGlzIGJsb2NrZWRcbiAgICogICBmcm9tIHN0YW5kYXJkIGV4ZWN1dGlvbiBhbmQgZnVydGhlciBidWJibGluZy5cbiAgICogQHBhcmFtIGluY3JlbWVudCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgbmV4dCBvciBwcmV2aW91cyBpcyBmb2N1c3NlZC5cbiAgICovXG4gIHByb3RlY3RlZCBtb3ZlRm9jdXMoZXZlbnQ6IFVJRXZlbnQsIGluY3JlbWVudDogbnVtYmVyKSB7XG4gICAgaWYgKHRoaXMuc2VydmljZS5oYXNGb2N1c2FibGVDaGlsZHJlbih0aGlzLmhvc3QpKSB7XG4gICAgICB0aGlzLnNlcnZpY2UubW92ZUZvY3VzKFxuICAgICAgICB0aGlzLmhvc3QsXG4gICAgICAgIHRoaXMuY29uZmlnLFxuICAgICAgICBpbmNyZW1lbnQsXG4gICAgICAgIGV2ZW50IGFzIFVJRXZlbnRcbiAgICAgICk7XG4gICAgfVxuICB9XG59XG4iXX0=