@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
102 lines • 11.3 kB
JavaScript
import { Directive, } from '@angular/core';
import { EscapeFocusDirective } from '../escape/escape-focus.directive';
import * as i0 from "@angular/core";
import * as i1 from "./auto-focus.service";
/**
* Directive that focus the first nested _focusable_ element based on state and configuration:
*
* 1. focusable element that was left in a focused state (aka _persisted_ focus)
* 2. focusable element selected by configured CSS selector (i.e. 'button[type=submit]')
* 3. focusable element marked with the native HTML5 `autofocus` attribute
* 4. first focusable element
* 5. the host element, in case the configured CSS selector is `:host`.
*
* Example configurations:
*
* `<div cxAutoFocus>[...]</div>`
*
* `<div [cxAutoFocus]="{autofocus: false}">[...]</div>`
*
* `<div [cxAutoFocus]="{autofocus: 'button.active'}">[...]</div>`
*
* `<div [cxAutoFocus]="{autofocus: ':host'}">[...]</div>`
*
* When your element is added dynamically (ie. by using an *ngIf or after a DOM change), the
* focus can be refreshed by using the refreshFocus configuration.
*/
export class AutoFocusDirective extends EscapeFocusDirective {
constructor(elementRef, service) {
super(elementRef, service);
this.elementRef = elementRef;
this.service = service;
/** The AutoFocusDirective will be using autofocus by default */
this.defaultConfig = { autofocus: true };
}
/**
* Focus the element explicitly if it was focussed before.
*/
ngAfterViewInit() {
if (this.shouldAutofocus) {
this.handleFocus();
}
if (!this.shouldAutofocus || this.hasPersistedFocus) {
super.ngAfterViewInit();
}
}
ngOnChanges(changes) {
var _a;
// responsible for refresh focus based on the configured refresh property name
if (!!((_a = changes.config.currentValue) === null || _a === void 0 ? void 0 : _a.refreshFocus)) {
// ensure the autofocus when it's to provided initially
if (!this.config.autofocus) {
this.config.autofocus = true;
}
this.handleFocus();
}
super.ngOnChanges(changes);
}
/**
* Mimic the focus without setting the actual focus on the host. The first
* focusable child element will be focussed.
*/
handleFocus(event) {
var _a;
if (this.shouldAutofocus) {
if (!(event === null || event === void 0 ? void 0 : event.target) || event.target === this.host) {
(_a = this.firstFocusable) === null || _a === void 0 ? void 0 : _a.focus();
}
else {
event.target.focus();
}
}
super.handleFocus(event);
}
/**
* Helper function to get the first focusable child element
*/
get hasPersistedFocus() {
return this.service.hasPersistedFocus(this.host, this.config);
}
/**
* Helper function to indicate whether we should use autofocus for the
* child elements.
*/
get shouldAutofocus() {
var _a;
return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.autofocus);
}
/**
* Helper function to get the first focusable child element.
*
* We keep this private to not pollute the API.
*/
get firstFocusable() {
return this.service.findFirstFocusable(this.host, this.config);
}
}
AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: i1.AutoFocusService }], target: i0.ɵɵFactoryTarget.Directive });
AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: AutoFocusDirective, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AutoFocusDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.AutoFocusService }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0by1mb2N1cy5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2xheW91dC9hMTF5L2tleWJvYXJkLWZvY3VzL2F1dG9mb2N1cy9hdXRvLWZvY3VzLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxHQUlWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7QUFJeEU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCRztBQUVILE1BQU0sT0FBTyxrQkFDWCxTQUFRLG9CQUFvQjtJQVM1QixZQUNZLFVBQXNCLEVBQ3RCLE9BQXlCO1FBRW5DLEtBQUssQ0FBQyxVQUFVLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFIakIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixZQUFPLEdBQVAsT0FBTyxDQUFrQjtRQVJyQyxpRUFBaUU7UUFDdkQsa0JBQWEsR0FBb0IsRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLENBQUM7SUFVL0QsQ0FBQztJQUVEOztPQUVHO0lBQ0gsZUFBZTtRQUNiLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUN4QixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDcEI7UUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDbkQsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjs7UUFDaEMsOEVBQThFO1FBQzlFLElBQUksQ0FBQyxDQUFDLENBQUEsTUFBQyxPQUFPLENBQUMsTUFBTSxDQUFDLFlBQWdDLDBDQUFFLFlBQVksQ0FBQSxFQUFFO1lBQ3BFLHVEQUF1RDtZQUN2RCxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLEVBQUU7Z0JBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQzthQUM5QjtZQUNELElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtRQUNELEtBQUssQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVEOzs7T0FHRztJQUNILFdBQVcsQ0FBQyxLQUFxQjs7UUFDL0IsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3hCLElBQUksQ0FBQyxDQUFBLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxNQUFNLENBQUEsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQ2hELE1BQUEsSUFBSSxDQUFDLGNBQWMsMENBQUUsS0FBSyxFQUFFLENBQUM7YUFDOUI7aUJBQU07Z0JBQ0osS0FBSyxDQUFDLE1BQXNCLENBQUMsS0FBSyxFQUFFLENBQUM7YUFDdkM7U0FDRjtRQUNELEtBQUssQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFBYyxpQkFBaUI7UUFDN0IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFRDs7O09BR0c7SUFDSCxJQUFjLGVBQWU7O1FBQzNCLE9BQU8sQ0FBQyxDQUFDLENBQUEsTUFBQSxJQUFJLENBQUMsTUFBTSwwQ0FBRSxTQUFTLENBQUEsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUNILElBQVksY0FBYztRQUN4QixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDakUsQ0FBQzs7K0dBOUVVLGtCQUFrQjttR0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBRDlCLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFc2NhcGVGb2N1c0RpcmVjdGl2ZSB9IGZyb20gJy4uL2VzY2FwZS9lc2NhcGUtZm9jdXMuZGlyZWN0aXZlJztcbmltcG9ydCB7IEF1dG9Gb2N1c0NvbmZpZyB9IGZyb20gJy4uL2tleWJvYXJkLWZvY3VzLm1vZGVsJztcbmltcG9ydCB7IEF1dG9Gb2N1c1NlcnZpY2UgfSBmcm9tICcuL2F1dG8tZm9jdXMuc2VydmljZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIHRoYXQgZm9jdXMgdGhlIGZpcnN0IG5lc3RlZCBfZm9jdXNhYmxlXyBlbGVtZW50IGJhc2VkIG9uIHN0YXRlIGFuZCBjb25maWd1cmF0aW9uOlxuICpcbiAqIDEuIGZvY3VzYWJsZSBlbGVtZW50IHRoYXQgd2FzIGxlZnQgaW4gYSBmb2N1c2VkIHN0YXRlIChha2EgX3BlcnNpc3RlZF8gZm9jdXMpXG4gKiAyLiBmb2N1c2FibGUgZWxlbWVudCBzZWxlY3RlZCBieSBjb25maWd1cmVkIENTUyBzZWxlY3RvciAoaS5lLiAnYnV0dG9uW3R5cGU9c3VibWl0XScpXG4gKiAzLiBmb2N1c2FibGUgZWxlbWVudCBtYXJrZWQgd2l0aCB0aGUgbmF0aXZlIEhUTUw1IGBhdXRvZm9jdXNgIGF0dHJpYnV0ZVxuICogNC4gZmlyc3QgZm9jdXNhYmxlIGVsZW1lbnRcbiAqIDUuIHRoZSBob3N0IGVsZW1lbnQsIGluIGNhc2UgdGhlIGNvbmZpZ3VyZWQgQ1NTIHNlbGVjdG9yIGlzIGA6aG9zdGAuXG4gKlxuICogRXhhbXBsZSBjb25maWd1cmF0aW9uczpcbiAqXG4gKiBgPGRpdiBjeEF1dG9Gb2N1cz5bLi4uXTwvZGl2PmBcbiAqXG4gKiBgPGRpdiBbY3hBdXRvRm9jdXNdPVwie2F1dG9mb2N1czogZmFsc2V9XCI+Wy4uLl08L2Rpdj5gXG4gKlxuICogYDxkaXYgW2N4QXV0b0ZvY3VzXT1cInthdXRvZm9jdXM6ICdidXR0b24uYWN0aXZlJ31cIj5bLi4uXTwvZGl2PmBcbiAqXG4gKiBgPGRpdiBbY3hBdXRvRm9jdXNdPVwie2F1dG9mb2N1czogJzpob3N0J31cIj5bLi4uXTwvZGl2PmBcbiAqXG4gKiBXaGVuIHlvdXIgZWxlbWVudCBpcyBhZGRlZCBkeW5hbWljYWxseSAoaWUuIGJ5IHVzaW5nIGFuICpuZ0lmIG9yIGFmdGVyIGEgRE9NIGNoYW5nZSksIHRoZVxuICogZm9jdXMgY2FuIGJlIHJlZnJlc2hlZCBieSB1c2luZyB0aGUgcmVmcmVzaEZvY3VzIGNvbmZpZ3VyYXRpb24uXG4gKi9cbkBEaXJlY3RpdmUoKSAvLyBzZWxlY3RvcjogJ1tjeEF1dG9Gb2N1c10nXG5leHBvcnQgY2xhc3MgQXV0b0ZvY3VzRGlyZWN0aXZlXG4gIGV4dGVuZHMgRXNjYXBlRm9jdXNEaXJlY3RpdmVcbiAgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXNcbntcbiAgLyoqIFRoZSBBdXRvRm9jdXNEaXJlY3RpdmUgd2lsbCBiZSB1c2luZyBhdXRvZm9jdXMgYnkgZGVmYXVsdCAgKi9cbiAgcHJvdGVjdGVkIGRlZmF1bHRDb25maWc6IEF1dG9Gb2N1c0NvbmZpZyA9IHsgYXV0b2ZvY3VzOiB0cnVlIH07XG5cbiAgLy8gQElucHV0KCdjeEF1dG9Gb2N1cycpXG4gIHByb3RlY3RlZCBjb25maWc6IEF1dG9Gb2N1c0NvbmZpZztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcm90ZWN0ZWQgc2VydmljZTogQXV0b0ZvY3VzU2VydmljZVxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCBzZXJ2aWNlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBGb2N1cyB0aGUgZWxlbWVudCBleHBsaWNpdGx5IGlmIGl0IHdhcyBmb2N1c3NlZCBiZWZvcmUuXG4gICAqL1xuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuc2hvdWxkQXV0b2ZvY3VzKSB7XG4gICAgICB0aGlzLmhhbmRsZUZvY3VzKCk7XG4gICAgfVxuICAgIGlmICghdGhpcy5zaG91bGRBdXRvZm9jdXMgfHwgdGhpcy5oYXNQZXJzaXN0ZWRGb2N1cykge1xuICAgICAgc3VwZXIubmdBZnRlclZpZXdJbml0KCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIC8vIHJlc3BvbnNpYmxlIGZvciByZWZyZXNoIGZvY3VzIGJhc2VkIG9uIHRoZSBjb25maWd1cmVkIHJlZnJlc2ggcHJvcGVydHkgbmFtZVxuICAgIGlmICghIShjaGFuZ2VzLmNvbmZpZy5jdXJyZW50VmFsdWUgYXMgQXV0b0ZvY3VzQ29uZmlnKT8ucmVmcmVzaEZvY3VzKSB7XG4gICAgICAvLyBlbnN1cmUgdGhlIGF1dG9mb2N1cyB3aGVuIGl0J3MgdG8gcHJvdmlkZWQgaW5pdGlhbGx5XG4gICAgICBpZiAoIXRoaXMuY29uZmlnLmF1dG9mb2N1cykge1xuICAgICAgICB0aGlzLmNvbmZpZy5hdXRvZm9jdXMgPSB0cnVlO1xuICAgICAgfVxuICAgICAgdGhpcy5oYW5kbGVGb2N1cygpO1xuICAgIH1cbiAgICBzdXBlci5uZ09uQ2hhbmdlcyhjaGFuZ2VzKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBNaW1pYyB0aGUgZm9jdXMgd2l0aG91dCBzZXR0aW5nIHRoZSBhY3R1YWwgZm9jdXMgb24gdGhlIGhvc3QuIFRoZSBmaXJzdFxuICAgKiBmb2N1c2FibGUgY2hpbGQgZWxlbWVudCB3aWxsIGJlIGZvY3Vzc2VkLlxuICAgKi9cbiAgaGFuZGxlRm9jdXMoZXZlbnQ/OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKHRoaXMuc2hvdWxkQXV0b2ZvY3VzKSB7XG4gICAgICBpZiAoIWV2ZW50Py50YXJnZXQgfHwgZXZlbnQudGFyZ2V0ID09PSB0aGlzLmhvc3QpIHtcbiAgICAgICAgdGhpcy5maXJzdEZvY3VzYWJsZT8uZm9jdXMoKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIChldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQpLmZvY3VzKCk7XG4gICAgICB9XG4gICAgfVxuICAgIHN1cGVyLmhhbmRsZUZvY3VzKGV2ZW50KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBIZWxwZXIgZnVuY3Rpb24gdG8gZ2V0IHRoZSBmaXJzdCBmb2N1c2FibGUgY2hpbGQgZWxlbWVudFxuICAgKi9cbiAgcHJvdGVjdGVkIGdldCBoYXNQZXJzaXN0ZWRGb2N1cygpIHtcbiAgICByZXR1cm4gdGhpcy5zZXJ2aWNlLmhhc1BlcnNpc3RlZEZvY3VzKHRoaXMuaG9zdCwgdGhpcy5jb25maWcpO1xuICB9XG5cbiAgLyoqXG4gICAqIEhlbHBlciBmdW5jdGlvbiB0byBpbmRpY2F0ZSB3aGV0aGVyIHdlIHNob3VsZCB1c2UgYXV0b2ZvY3VzIGZvciB0aGVcbiAgICogY2hpbGQgZWxlbWVudHMuXG4gICAqL1xuICBwcm90ZWN0ZWQgZ2V0IHNob3VsZEF1dG9mb2N1cygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmNvbmZpZz8uYXV0b2ZvY3VzO1xuICB9XG5cbiAgLyoqXG4gICAqIEhlbHBlciBmdW5jdGlvbiB0byBnZXQgdGhlIGZpcnN0IGZvY3VzYWJsZSBjaGlsZCBlbGVtZW50LlxuICAgKlxuICAgKiBXZSBrZWVwIHRoaXMgcHJpdmF0ZSB0byBub3QgcG9sbHV0ZSB0aGUgQVBJLlxuICAgKi9cbiAgcHJpdmF0ZSBnZXQgZmlyc3RGb2N1c2FibGUoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLnNlcnZpY2UuZmluZEZpcnN0Rm9jdXNhYmxlKHRoaXMuaG9zdCwgdGhpcy5jb25maWcpO1xuICB9XG59XG4iXX0=