@clr/angular
Version:
Angular components for Clarity
102 lines • 12.6 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 { Directive, HostListener, Input } from '@angular/core';
import { BASIC_FOCUSABLE_ITEM_PROVIDER } from '../../utils/focus/focusable-item/basic-focusable-item.service';
import * as i0 from "@angular/core";
import * as i1 from "./dropdown";
import * as i2 from "./providers/dropdown.service";
import * as i3 from "../../utils/focus/focusable-item/focusable-item";
export class ClrDropdownItem {
constructor(dropdown, _dropdownService, focusableItem) {
this.dropdown = dropdown;
this._dropdownService = _dropdownService;
this.focusableItem = focusableItem;
}
get disabled() {
return this.focusableItem.disabled;
}
set disabled(value) {
// Empty string attribute evaluates to false but should disable the item, so we need to add a special case for it.
this.focusableItem.disabled = !!value || value === '';
}
/**
* Let you overwrite the focusable auto increment id.
*/
get dropdownItemId() {
return this.focusableItem.id;
}
set dropdownItemId(value) {
this.focusableItem.id = value;
}
onDropdownItemClick() {
// Move focus back to the root dropdown trigger.
// This is done BEFORE the dropdown is closed so that focus gets moved properly if a modal is opened.
if (this.dropdown.isMenuClosable && !this.disabled && this.dropdown.toggleService.open) {
const rootDropdown = this.findRootDropdown();
rootDropdown.focusHandler.focus();
// Prevent moving focus back to the trigger when the dropdown menu is closed.
// Without this line, focus could be "stolen" from a modal that was opened from a dropdown item.
rootDropdown.focusHandler.focusBackOnTriggerWhenClosed = false;
}
// Ensure that the dropdown is closed after custom dropdown item click event handlers have run.
setTimeout(() => {
if (this.dropdown.isMenuClosable && !this.disabled) {
this._dropdownService.closeMenus();
}
});
}
onSpaceKeydown($event) {
this.stopImmediatePropagationIfDisabled($event);
}
onEnterKeydown($event) {
this.stopImmediatePropagationIfDisabled($event);
}
stopImmediatePropagationIfDisabled($event) {
if (this.disabled) {
$event.preventDefault(); // prevent click event
$event.stopImmediatePropagation();
}
}
findRootDropdown() {
let rootDropdown = this.dropdown;
while (rootDropdown.parent) {
rootDropdown = rootDropdown.parent;
}
return rootDropdown;
}
}
ClrDropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDropdownItem, deps: [{ token: i1.ClrDropdown }, { token: i2.RootDropdownService }, { token: i3.FocusableItem }], target: i0.ɵɵFactoryTarget.Directive });
ClrDropdownItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrDropdownItem, selector: "[clrDropdownItem]", inputs: { disabled: ["clrDisabled", "disabled"], dropdownItemId: ["id", "dropdownItemId"] }, host: { listeners: { "click": "onDropdownItemClick()", "keydown.space": "onSpaceKeydown($event)", "keydown.enter": "onEnterKeydown($event)" }, properties: { "class.disabled": "disabled", "class.dropdown-item": "true", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled", "attr.id": "dropdownItemId" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDropdownItem, decorators: [{
type: Directive,
args: [{
selector: '[clrDropdownItem]',
host: {
'[class.disabled]': 'disabled',
'[class.dropdown-item]': 'true',
'[attr.role]': '"menuitem"',
'[attr.aria-disabled]': 'disabled',
'[attr.id]': 'dropdownItemId',
},
providers: [BASIC_FOCUSABLE_ITEM_PROVIDER],
}]
}], ctorParameters: function () { return [{ type: i1.ClrDropdown }, { type: i2.RootDropdownService }, { type: i3.FocusableItem }]; }, propDecorators: { disabled: [{
type: Input,
args: ['clrDisabled']
}], dropdownItemId: [{
type: Input,
args: ['id']
}], onDropdownItemClick: [{
type: HostListener,
args: ['click']
}], onSpaceKeydown: [{
type: HostListener,
args: ['keydown.space', ['$event']]
}], onEnterKeydown: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24taXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL3BvcG92ZXIvZHJvcGRvd24vZHJvcGRvd24taXRlbS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7OztHQUlHO0FBRUgsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRS9ELE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLCtEQUErRCxDQUFDOzs7OztBQWdCOUcsTUFBTSxPQUFPLGVBQWU7SUFDMUIsWUFDVSxRQUFxQixFQUNyQixnQkFBcUMsRUFDckMsYUFBNEI7UUFGNUIsYUFBUSxHQUFSLFFBQVEsQ0FBYTtRQUNyQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQXFCO1FBQ3JDLGtCQUFhLEdBQWIsYUFBYSxDQUFlO0lBQ25DLENBQUM7SUFFSixJQUNJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDO0lBQ3JDLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUF1QjtRQUNsQyxrSEFBa0g7UUFDbEgsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLEtBQUssSUFBSSxLQUFLLEtBQUssRUFBRSxDQUFDO0lBQ3hELENBQUM7SUFFRDs7T0FFRztJQUNILElBQ0ksY0FBYztRQUNoQixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFDRCxJQUFJLGNBQWMsQ0FBQyxLQUFhO1FBQzlCLElBQUksQ0FBQyxhQUFhLENBQUMsRUFBRSxHQUFHLEtBQUssQ0FBQztJQUNoQyxDQUFDO0lBR08sbUJBQW1CO1FBQ3pCLGdEQUFnRDtRQUNoRCxxR0FBcUc7UUFDckcsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFO1lBQ3RGLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBRTdDLFlBQVksQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDbEMsNkVBQTZFO1lBQzdFLGdHQUFnRztZQUNoRyxZQUFZLENBQUMsWUFBWSxDQUFDLDRCQUE0QixHQUFHLEtBQUssQ0FBQztTQUNoRTtRQUVELCtGQUErRjtRQUMvRixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2xELElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQzthQUNwQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUdPLGNBQWMsQ0FBQyxNQUFxQjtRQUMxQyxJQUFJLENBQUMsa0NBQWtDLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUdPLGNBQWMsQ0FBQyxNQUFxQjtRQUMxQyxJQUFJLENBQUMsa0NBQWtDLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVPLGtDQUFrQyxDQUFDLE1BQWE7UUFDdEQsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2pCLE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDLHNCQUFzQjtZQUMvQyxNQUFNLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztTQUNuQztJQUNILENBQUM7SUFFTyxnQkFBZ0I7UUFDdEIsSUFBSSxZQUFZLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUVqQyxPQUFPLFlBQVksQ0FBQyxNQUFNLEVBQUU7WUFDMUIsWUFBWSxHQUFHLFlBQVksQ0FBQyxNQUFNLENBQUM7U0FDcEM7UUFFRCxPQUFPLFlBQVksQ0FBQztJQUN0QixDQUFDOzs0R0F6RVUsZUFBZTtnR0FBZixlQUFlLG1jQUZmLENBQUMsNkJBQTZCLENBQUM7MkZBRS9CLGVBQWU7a0JBWDNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsSUFBSSxFQUFFO3dCQUNKLGtCQUFrQixFQUFFLFVBQVU7d0JBQzlCLHVCQUF1QixFQUFFLE1BQU07d0JBQy9CLGFBQWEsRUFBRSxZQUFZO3dCQUMzQixzQkFBc0IsRUFBRSxVQUFVO3dCQUNsQyxXQUFXLEVBQUUsZ0JBQWdCO3FCQUM5QjtvQkFDRCxTQUFTLEVBQUUsQ0FBQyw2QkFBNkIsQ0FBQztpQkFDM0M7Z0tBU0ssUUFBUTtzQkFEWCxLQUFLO3VCQUFDLGFBQWE7Z0JBYWhCLGNBQWM7c0JBRGpCLEtBQUs7dUJBQUMsSUFBSTtnQkFTSCxtQkFBbUI7c0JBRDFCLFlBQVk7dUJBQUMsT0FBTztnQkFzQmIsY0FBYztzQkFEckIsWUFBWTt1QkFBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBTWpDLGNBQWM7c0JBRHJCLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQkFTSUNfRk9DVVNBQkxFX0lURU1fUFJPVklERVIgfSBmcm9tICcuLi8uLi91dGlscy9mb2N1cy9mb2N1c2FibGUtaXRlbS9iYXNpYy1mb2N1c2FibGUtaXRlbS5zZXJ2aWNlJztcbmltcG9ydCB7IEZvY3VzYWJsZUl0ZW0gfSBmcm9tICcuLi8uLi91dGlscy9mb2N1cy9mb2N1c2FibGUtaXRlbS9mb2N1c2FibGUtaXRlbSc7XG5pbXBvcnQgeyBDbHJEcm9wZG93biB9IGZyb20gJy4vZHJvcGRvd24nO1xuaW1wb3J0IHsgUm9vdERyb3Bkb3duU2VydmljZSB9IGZyb20gJy4vcHJvdmlkZXJzL2Ryb3Bkb3duLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY2xyRHJvcGRvd25JdGVtXScsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLmRpc2FibGVkXSc6ICdkaXNhYmxlZCcsXG4gICAgJ1tjbGFzcy5kcm9wZG93bi1pdGVtXSc6ICd0cnVlJyxcbiAgICAnW2F0dHIucm9sZV0nOiAnXCJtZW51aXRlbVwiJyxcbiAgICAnW2F0dHIuYXJpYS1kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuICAgICdbYXR0ci5pZF0nOiAnZHJvcGRvd25JdGVtSWQnLFxuICB9LFxuICBwcm92aWRlcnM6IFtCQVNJQ19GT0NVU0FCTEVfSVRFTV9QUk9WSURFUl0sXG59KVxuZXhwb3J0IGNsYXNzIENsckRyb3Bkb3duSXRlbSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZHJvcGRvd246IENsckRyb3Bkb3duLFxuICAgIHByaXZhdGUgX2Ryb3Bkb3duU2VydmljZTogUm9vdERyb3Bkb3duU2VydmljZSxcbiAgICBwcml2YXRlIGZvY3VzYWJsZUl0ZW06IEZvY3VzYWJsZUl0ZW1cbiAgKSB7fVxuXG4gIEBJbnB1dCgnY2xyRGlzYWJsZWQnKVxuICBnZXQgZGlzYWJsZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9jdXNhYmxlSXRlbS5kaXNhYmxlZDtcbiAgfVxuICBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4gfCBzdHJpbmcpIHtcbiAgICAvLyBFbXB0eSBzdHJpbmcgYXR0cmlidXRlIGV2YWx1YXRlcyB0byBmYWxzZSBidXQgc2hvdWxkIGRpc2FibGUgdGhlIGl0ZW0sIHNvIHdlIG5lZWQgdG8gYWRkIGEgc3BlY2lhbCBjYXNlIGZvciBpdC5cbiAgICB0aGlzLmZvY3VzYWJsZUl0ZW0uZGlzYWJsZWQgPSAhIXZhbHVlIHx8IHZhbHVlID09PSAnJztcbiAgfVxuXG4gIC8qKlxuICAgKiBMZXQgeW91IG92ZXJ3cml0ZSB0aGUgZm9jdXNhYmxlIGF1dG8gaW5jcmVtZW50IGlkLlxuICAgKi9cbiAgQElucHV0KCdpZCcpXG4gIGdldCBkcm9wZG93bkl0ZW1JZCgpIHtcbiAgICByZXR1cm4gdGhpcy5mb2N1c2FibGVJdGVtLmlkO1xuICB9XG4gIHNldCBkcm9wZG93bkl0ZW1JZCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5mb2N1c2FibGVJdGVtLmlkID0gdmFsdWU7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIHByaXZhdGUgb25Ecm9wZG93bkl0ZW1DbGljaygpOiB2b2lkIHtcbiAgICAvLyBNb3ZlIGZvY3VzIGJhY2sgdG8gdGhlIHJvb3QgZHJvcGRvd24gdHJpZ2dlci5cbiAgICAvLyBUaGlzIGlzIGRvbmUgQkVGT1JFIHRoZSBkcm9wZG93biBpcyBjbG9zZWQgc28gdGhhdCBmb2N1cyBnZXRzIG1vdmVkIHByb3Blcmx5IGlmIGEgbW9kYWwgaXMgb3BlbmVkLlxuICAgIGlmICh0aGlzLmRyb3Bkb3duLmlzTWVudUNsb3NhYmxlICYmICF0aGlzLmRpc2FibGVkICYmIHRoaXMuZHJvcGRvd24udG9nZ2xlU2VydmljZS5vcGVuKSB7XG4gICAgICBjb25zdCByb290RHJvcGRvd24gPSB0aGlzLmZpbmRSb290RHJvcGRvd24oKTtcblxuICAgICAgcm9vdERyb3Bkb3duLmZvY3VzSGFuZGxlci5mb2N1cygpO1xuICAgICAgLy8gUHJldmVudCBtb3ZpbmcgZm9jdXMgYmFjayB0byB0aGUgdHJpZ2dlciB3aGVuIHRoZSBkcm9wZG93biBtZW51IGlzIGNsb3NlZC5cbiAgICAgIC8vIFdpdGhvdXQgdGhpcyBsaW5lLCBmb2N1cyBjb3VsZCBiZSBcInN0b2xlblwiIGZyb20gYSBtb2RhbCB0aGF0IHdhcyBvcGVuZWQgZnJvbSBhIGRyb3Bkb3duIGl0ZW0uXG4gICAgICByb290RHJvcGRvd24uZm9jdXNIYW5kbGVyLmZvY3VzQmFja09uVHJpZ2dlcldoZW5DbG9zZWQgPSBmYWxzZTtcbiAgICB9XG5cbiAgICAvLyBFbnN1cmUgdGhhdCB0aGUgZHJvcGRvd24gaXMgY2xvc2VkIGFmdGVyIGN1c3RvbSBkcm9wZG93biBpdGVtIGNsaWNrIGV2ZW50IGhhbmRsZXJzIGhhdmUgcnVuLlxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMuZHJvcGRvd24uaXNNZW51Q2xvc2FibGUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgICAgdGhpcy5fZHJvcGRvd25TZXJ2aWNlLmNsb3NlTWVudXMoKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uc3BhY2UnLCBbJyRldmVudCddKVxuICBwcml2YXRlIG9uU3BhY2VLZXlkb3duKCRldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIHRoaXMuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uSWZEaXNhYmxlZCgkZXZlbnQpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5lbnRlcicsIFsnJGV2ZW50J10pXG4gIHByaXZhdGUgb25FbnRlcktleWRvd24oJGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgdGhpcy5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb25JZkRpc2FibGVkKCRldmVudCk7XG4gIH1cblxuICBwcml2YXRlIHN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbklmRGlzYWJsZWQoJGV2ZW50OiBFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAkZXZlbnQucHJldmVudERlZmF1bHQoKTsgLy8gcHJldmVudCBjbGljayBldmVudFxuICAgICAgJGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZmluZFJvb3REcm9wZG93bigpIHtcbiAgICBsZXQgcm9vdERyb3Bkb3duID0gdGhpcy5kcm9wZG93bjtcblxuICAgIHdoaWxlIChyb290RHJvcGRvd24ucGFyZW50KSB7XG4gICAgICByb290RHJvcGRvd24gPSByb290RHJvcGRvd24ucGFyZW50O1xuICAgIH1cblxuICAgIHJldHVybiByb290RHJvcGRvd247XG4gIH1cbn1cbiJdfQ==