@clr/angular
Version:
Angular components for Clarity
96 lines • 12.9 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 { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { Directive, HostListener, Inject, PLATFORM_ID } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/popover/providers/popover-toggle.service";
import * as i2 from "../../utils/i18n/common-strings.service";
import * as i3 from "./providers/signpost-id.service";
import * as i4 from "./providers/signpost-focus-manager.service";
/*********
*
* @description
* A Directive added to the ClrSignpost Trigger button that will call the ClrSignpost.toggle() function to hide/show the
* ClrSignpostContent.
*
*/
export class ClrSignpostTrigger {
constructor(toggleService, el, commonStrings, signpostIdService, signpostFocusManager, document, platformId) {
this.toggleService = toggleService;
this.el = el;
this.commonStrings = commonStrings;
this.signpostIdService = signpostIdService;
this.signpostFocusManager = signpostFocusManager;
this.platformId = platformId;
this.subscriptions = [];
this.document = document;
}
ngOnInit() {
this.signpostFocusManager.triggerEl = this.el.nativeElement;
this.subscriptions.push(this.toggleService.openChange.subscribe((isOpen) => {
this.ariaExpanded = isOpen;
const prevIsOpen = this.isOpen;
this.isOpen = isOpen;
// openChange fires false on initialization because signpost starts as closed by default
// but we shouldn't focus on that initial false value
// we should focus back only if it's closed after being opened
if (!this.isOpen && prevIsOpen) {
this.focusOnClose();
}
}), this.signpostIdService.id.subscribe(idChange => (this.ariaControl = idChange)));
this.addDefaultAriaLabel(this.el.nativeElement);
}
ngOnDestroy() {
this.subscriptions.forEach((sub) => sub.unsubscribe());
}
/**********
*
* @description
* click handler for the ClrSignpost trigger button used to hide/show ClrSignpostContent.
*/
onSignpostTriggerClick(event) {
this.toggleService.toggleWithEvent(event);
}
addDefaultAriaLabel(el) {
if (!el.hasAttribute('aria-label')) {
el.setAttribute('aria-label', this.commonStrings.keys.signpostToggle);
}
}
focusOnClose() {
if (!isPlatformBrowser(this.platformId)) {
return;
}
// we have to set the focus back on the trigger only if the focus is reset back to the body element
// if the focus is on another element, we are not allowed to move that focus back to this trigger again.
if (!this.isOpen && this.document.activeElement === this.document.body) {
this.signpostFocusManager.focusTrigger();
}
}
}
ClrSignpostTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrSignpostTrigger, deps: [{ token: i1.ClrPopoverToggleService }, { token: i0.ElementRef }, { token: i2.ClrCommonStringsService }, { token: i3.SignpostIdService }, { token: i4.SignpostFocusManager }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
ClrSignpostTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrSignpostTrigger, selector: "[clrSignpostTrigger]", host: { listeners: { "click": "onSignpostTriggerClick($event)" }, properties: { "attr.aria-expanded": "ariaExpanded", "attr.aria-controls": "ariaControl", "class.active": "isOpen" }, classAttribute: "signpost-trigger" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrSignpostTrigger, decorators: [{
type: Directive,
args: [{
selector: '[clrSignpostTrigger]',
host: {
class: 'signpost-trigger',
'[attr.aria-expanded]': 'ariaExpanded',
'[attr.aria-controls]': 'ariaControl',
'[class.active]': 'isOpen',
},
}]
}], ctorParameters: function () { return [{ type: i1.ClrPopoverToggleService }, { type: i0.ElementRef }, { type: i2.ClrCommonStringsService }, { type: i3.SignpostIdService }, { type: i4.SignpostFocusManager }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, propDecorators: { onSignpostTriggerClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbnBvc3QtdHJpZ2dlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL3BvcG92ZXIvc2lnbnBvc3Qvc2lnbnBvc3QtdHJpZ2dlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7OztHQUlHO0FBRUgsT0FBTyxFQUFFLFFBQVEsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlELE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLE1BQU0sRUFBYSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7OztBQWtCcEc7Ozs7OztHQU1HO0FBQ0gsTUFBTSxPQUFPLGtCQUFrQjtJQVE3QixZQUNVLGFBQXNDLEVBQ3RDLEVBQWMsRUFDZixhQUFzQyxFQUNyQyxpQkFBb0MsRUFDcEMsb0JBQTBDLEVBQ2hDLFFBQWEsRUFDRixVQUFlO1FBTnBDLGtCQUFhLEdBQWIsYUFBYSxDQUF5QjtRQUN0QyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2Ysa0JBQWEsR0FBYixhQUFhLENBQXlCO1FBQ3JDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFDcEMseUJBQW9CLEdBQXBCLG9CQUFvQixDQUFzQjtRQUVyQixlQUFVLEdBQVYsVUFBVSxDQUFLO1FBVHRDLGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQVd6QyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMzQixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFDNUQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ3JCLElBQUksQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLE1BQWUsRUFBRSxFQUFFO1lBQzFELElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDO1lBRTNCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDL0IsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7WUFFckIsd0ZBQXdGO1lBQ3hGLHFEQUFxRDtZQUNyRCw4REFBOEQ7WUFDOUQsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLElBQUksVUFBVSxFQUFFO2dCQUM5QixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7YUFDckI7UUFDSCxDQUFDLENBQUMsRUFDRixJQUFJLENBQUMsaUJBQWlCLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUMvRSxDQUFDO1FBQ0YsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQWlCLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZFLENBQUM7SUFFRDs7OztPQUlHO0lBRUgsc0JBQXNCLENBQUMsS0FBWTtRQUNqQyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRU8sbUJBQW1CLENBQUMsRUFBZTtRQUN6QyxJQUFJLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUMsRUFBRTtZQUNsQyxFQUFFLENBQUMsWUFBWSxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztTQUN2RTtJQUNILENBQUM7SUFFTyxZQUFZO1FBQ2xCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDdkMsT0FBTztTQUNSO1FBQ0QsbUdBQW1HO1FBQ25HLHdHQUF3RztRQUN4RyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsS0FBSyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRTtZQUN0RSxJQUFJLENBQUMsb0JBQW9CLENBQUMsWUFBWSxFQUFFLENBQUM7U0FDMUM7SUFDSCxDQUFDOzsrR0F0RVUsa0JBQWtCLCtMQWNuQixRQUFRLGFBQ1IsV0FBVzttR0FmVixrQkFBa0I7MkZBQWxCLGtCQUFrQjtrQkFqQjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxrQkFBa0I7d0JBQ3pCLHNCQUFzQixFQUFFLGNBQWM7d0JBQ3RDLHNCQUFzQixFQUFFLGFBQWE7d0JBQ3JDLGdCQUFnQixFQUFFLFFBQVE7cUJBQzNCO2lCQUNGOzswQkF1QkksTUFBTTsyQkFBQyxRQUFROzswQkFDZixNQUFNOzJCQUFDLFdBQVc7NENBb0NyQixzQkFBc0I7c0JBRHJCLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBET0NVTUVOVCwgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIEluamVjdCwgT25EZXN0cm95LCBQTEFURk9STV9JRCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IENsckNvbW1vblN0cmluZ3NTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvaTE4bi9jb21tb24tc3RyaW5ncy5zZXJ2aWNlJztcbmltcG9ydCB7IENsclBvcG92ZXJUb2dnbGVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvcG9wb3Zlci9wcm92aWRlcnMvcG9wb3Zlci10b2dnbGUuc2VydmljZSc7XG5pbXBvcnQgeyBTaWducG9zdEZvY3VzTWFuYWdlciB9IGZyb20gJy4vcHJvdmlkZXJzL3NpZ25wb3N0LWZvY3VzLW1hbmFnZXIuc2VydmljZSc7XG5pbXBvcnQgeyBTaWducG9zdElkU2VydmljZSB9IGZyb20gJy4vcHJvdmlkZXJzL3NpZ25wb3N0LWlkLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY2xyU2lnbnBvc3RUcmlnZ2VyXScsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3NpZ25wb3N0LXRyaWdnZXInLFxuICAgICdbYXR0ci5hcmlhLWV4cGFuZGVkXSc6ICdhcmlhRXhwYW5kZWQnLFxuICAgICdbYXR0ci5hcmlhLWNvbnRyb2xzXSc6ICdhcmlhQ29udHJvbCcsXG4gICAgJ1tjbGFzcy5hY3RpdmVdJzogJ2lzT3BlbicsXG4gIH0sXG59KVxuXG4vKioqKioqKioqXG4gKlxuICogQGRlc2NyaXB0aW9uXG4gKiBBIERpcmVjdGl2ZSBhZGRlZCB0byB0aGUgQ2xyU2lnbnBvc3QgVHJpZ2dlciBidXR0b24gdGhhdCB3aWxsIGNhbGwgdGhlIENsclNpZ25wb3N0LnRvZ2dsZSgpIGZ1bmN0aW9uIHRvIGhpZGUvc2hvdyB0aGVcbiAqIENsclNpZ25wb3N0Q29udGVudC5cbiAqXG4gKi9cbmV4cG9ydCBjbGFzcyBDbHJTaWducG9zdFRyaWdnZXIgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBhcmlhRXhwYW5kZWQ6IGJvb2xlYW47XG4gIGFyaWFDb250cm9sOiBzdHJpbmc7XG4gIGlzT3BlbjogYm9vbGVhbjtcblxuICBwcml2YXRlIGRvY3VtZW50OiBEb2N1bWVudDtcbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb25zOiBTdWJzY3JpcHRpb25bXSA9IFtdO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgdG9nZ2xlU2VydmljZTogQ2xyUG9wb3ZlclRvZ2dsZVNlcnZpY2UsXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICBwdWJsaWMgY29tbW9uU3RyaW5nczogQ2xyQ29tbW9uU3RyaW5nc1NlcnZpY2UsXG4gICAgcHJpdmF0ZSBzaWducG9zdElkU2VydmljZTogU2lnbnBvc3RJZFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBzaWducG9zdEZvY3VzTWFuYWdlcjogU2lnbnBvc3RGb2N1c01hbmFnZXIsXG4gICAgQEluamVjdChET0NVTUVOVCkgZG9jdW1lbnQ6IGFueSxcbiAgICBASW5qZWN0KFBMQVRGT1JNX0lEKSBwcml2YXRlIHBsYXRmb3JtSWQ6IGFueVxuICApIHtcbiAgICB0aGlzLmRvY3VtZW50ID0gZG9jdW1lbnQ7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNpZ25wb3N0Rm9jdXNNYW5hZ2VyLnRyaWdnZXJFbCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbnMucHVzaChcbiAgICAgIHRoaXMudG9nZ2xlU2VydmljZS5vcGVuQ2hhbmdlLnN1YnNjcmliZSgoaXNPcGVuOiBib29sZWFuKSA9PiB7XG4gICAgICAgIHRoaXMuYXJpYUV4cGFuZGVkID0gaXNPcGVuO1xuXG4gICAgICAgIGNvbnN0IHByZXZJc09wZW4gPSB0aGlzLmlzT3BlbjtcbiAgICAgICAgdGhpcy5pc09wZW4gPSBpc09wZW47XG5cbiAgICAgICAgLy8gb3BlbkNoYW5nZSBmaXJlcyBmYWxzZSBvbiBpbml0aWFsaXphdGlvbiBiZWNhdXNlIHNpZ25wb3N0IHN0YXJ0cyBhcyBjbG9zZWQgYnkgZGVmYXVsdFxuICAgICAgICAvLyBidXQgd2Ugc2hvdWxkbid0IGZvY3VzIG9uIHRoYXQgaW5pdGlhbCBmYWxzZSB2YWx1ZVxuICAgICAgICAvLyB3ZSBzaG91bGQgZm9jdXMgYmFjayBvbmx5IGlmIGl0J3MgY2xvc2VkIGFmdGVyIGJlaW5nIG9wZW5lZFxuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuICYmIHByZXZJc09wZW4pIHtcbiAgICAgICAgICB0aGlzLmZvY3VzT25DbG9zZSgpO1xuICAgICAgICB9XG4gICAgICB9KSxcbiAgICAgIHRoaXMuc2lnbnBvc3RJZFNlcnZpY2UuaWQuc3Vic2NyaWJlKGlkQ2hhbmdlID0+ICh0aGlzLmFyaWFDb250cm9sID0gaWRDaGFuZ2UpKVxuICAgICk7XG4gICAgdGhpcy5hZGREZWZhdWx0QXJpYUxhYmVsKHRoaXMuZWwubmF0aXZlRWxlbWVudCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbnMuZm9yRWFjaCgoc3ViOiBTdWJzY3JpcHRpb24pID0+IHN1Yi51bnN1YnNjcmliZSgpKTtcbiAgfVxuXG4gIC8qKioqKioqKioqXG4gICAqXG4gICAqIEBkZXNjcmlwdGlvblxuICAgKiBjbGljayBoYW5kbGVyIGZvciB0aGUgQ2xyU2lnbnBvc3QgdHJpZ2dlciBidXR0b24gdXNlZCB0byBoaWRlL3Nob3cgQ2xyU2lnbnBvc3RDb250ZW50LlxuICAgKi9cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBvblNpZ25wb3N0VHJpZ2dlckNsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIHRoaXMudG9nZ2xlU2VydmljZS50b2dnbGVXaXRoRXZlbnQoZXZlbnQpO1xuICB9XG5cbiAgcHJpdmF0ZSBhZGREZWZhdWx0QXJpYUxhYmVsKGVsOiBIVE1MRWxlbWVudCkge1xuICAgIGlmICghZWwuaGFzQXR0cmlidXRlKCdhcmlhLWxhYmVsJykpIHtcbiAgICAgIGVsLnNldEF0dHJpYnV0ZSgnYXJpYS1sYWJlbCcsIHRoaXMuY29tbW9uU3RyaW5ncy5rZXlzLnNpZ25wb3N0VG9nZ2xlKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGZvY3VzT25DbG9zZSgpIHtcbiAgICBpZiAoIWlzUGxhdGZvcm1Ccm93c2VyKHRoaXMucGxhdGZvcm1JZCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgLy8gd2UgaGF2ZSB0byBzZXQgdGhlIGZvY3VzIGJhY2sgb24gdGhlIHRyaWdnZXIgb25seSBpZiB0aGUgZm9jdXMgaXMgcmVzZXQgYmFjayB0byB0aGUgYm9keSBlbGVtZW50XG4gICAgLy8gaWYgdGhlIGZvY3VzIGlzIG9uIGFub3RoZXIgZWxlbWVudCwgd2UgYXJlIG5vdCBhbGxvd2VkIHRvIG1vdmUgdGhhdCBmb2N1cyBiYWNrIHRvIHRoaXMgdHJpZ2dlciBhZ2Fpbi5cbiAgICBpZiAoIXRoaXMuaXNPcGVuICYmIHRoaXMuZG9jdW1lbnQuYWN0aXZlRWxlbWVudCA9PT0gdGhpcy5kb2N1bWVudC5ib2R5KSB7XG4gICAgICB0aGlzLnNpZ25wb3N0Rm9jdXNNYW5hZ2VyLmZvY3VzVHJpZ2dlcigpO1xuICAgIH1cbiAgfVxufVxuIl19