gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
68 lines • 8.82 kB
JavaScript
import { Component, ContentChildren, HostListener, EventEmitter, forwardRef, QueryList, ElementRef } from '@angular/core';
import { DropdownItem } from './dropdown-item.component';
import { KeyCode } from '../../common/keycodes';
import { FOCUSABLE_SELECTOR } from './dropdown-trigger.directive';
import * as i0 from "@angular/core";
/**
* Wraps the content and handles keyboard control (tabbing and focus) of the contents.
*/
export class DropdownContent {
constructor(elementRef) {
this.elementRef = elementRef;
this.focusLost = new EventEmitter();
this.focusableItems = [];
}
keyHandler(e) {
if (e.keyCode === KeyCode.Tab) {
if (e.shiftKey) {
this.focusPrevious(e.target, e);
}
else {
this.focusNext(e.target, e);
}
}
}
ngAfterContentInit() {
this.focusableItems = Array.from(this.elementRef.nativeElement.querySelectorAll(FOCUSABLE_SELECTOR));
}
focusFirstItem() {
const firstItem = this.focusableItems[0];
if (firstItem && firstItem.focus) {
firstItem.focus();
}
}
focusNext(currentElement, e) {
const items = this.focusableItems;
const index = this.getIndexOfElement(currentElement);
if (index === items.length - 1) {
e.preventDefault();
this.focusLost.emit(true);
}
}
focusPrevious(currentElement, e) {
const index = this.getIndexOfElement(currentElement);
if (index === 0) {
e.preventDefault();
this.focusLost.emit(true);
}
}
getIndexOfElement(element) {
return this.focusableItems.indexOf(element);
}
}
/** @nocollapse */ DropdownContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DropdownContent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ DropdownContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DropdownContent, selector: "gtx-dropdown-content", host: { listeners: { "keydown": "keyHandler($event)" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(function () { return DropdownItem; }), read: ElementRef }], ngImport: i0, template: `<div class="scroller"><ng-content></ng-content></div>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DropdownContent, decorators: [{
type: Component,
args: [{
selector: 'gtx-dropdown-content',
template: `<div class="scroller"><ng-content></ng-content></div>`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { items: [{
type: ContentChildren,
args: [forwardRef(() => DropdownItem), { read: ElementRef }]
}], keyHandler: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tY29udGVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9kcm9wZG93bi1saXN0L2Ryb3Bkb3duLWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQW1CLE1BQU0sZUFBZSxDQUFDO0FBQzFJLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDOUMsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sOEJBQThCLENBQUM7O0FBRWhFOztHQUVHO0FBS0gsTUFBTSxPQUFPLGVBQWU7SUFNeEIsWUFBbUIsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUx6QyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUN4QyxtQkFBYyxHQUFrQixFQUFFLENBQUM7SUFJUyxDQUFDO0lBRzdDLFVBQVUsQ0FBQyxDQUFnQjtRQUN2QixJQUFJLENBQUMsQ0FBQyxPQUFPLEtBQUssT0FBTyxDQUFDLEdBQUcsRUFBRTtZQUMzQixJQUFJLENBQUMsQ0FBQyxRQUFRLEVBQUU7Z0JBQ1osSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsTUFBcUIsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNsRDtpQkFBTTtnQkFDSCxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFxQixFQUFFLENBQUMsQ0FBQyxDQUFDO2FBQzlDO1NBQ0o7SUFDTCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsSUFBSSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFjLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQztJQUN0SCxDQUFDO0lBRUQsY0FBYztRQUNWLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDekMsSUFBSSxTQUFTLElBQUksU0FBUyxDQUFDLEtBQUssRUFBRTtZQUM5QixTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDckI7SUFDTCxDQUFDO0lBRUQsU0FBUyxDQUFDLGNBQTJCLEVBQUUsQ0FBZ0I7UUFDbkQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQztRQUNsQyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDckQsSUFBSSxLQUFLLEtBQUssS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDNUIsQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzdCO0lBQ0wsQ0FBQztJQUVELGFBQWEsQ0FBQyxjQUEyQixFQUFFLENBQWdCO1FBQ3ZELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNyRCxJQUFJLEtBQUssS0FBSyxDQUFDLEVBQUU7WUFDYixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDbkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDN0I7SUFDTCxDQUFDO0lBRU8saUJBQWlCLENBQUMsT0FBb0I7UUFDMUMsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoRCxDQUFDOzsrSEFqRFEsZUFBZTttSEFBZixlQUFlLCtLQUlVLFlBQVksWUFBVyxVQUFVLDZCQU56RCx1REFBdUQ7MkZBRXhELGVBQWU7a0JBSjNCLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsUUFBUSxFQUFFLHVEQUF1RDtpQkFDcEU7aUdBSzBFLEtBQUs7c0JBQTNFLGVBQWU7dUJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkFLckUsVUFBVTtzQkFEVCxZQUFZO3VCQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBDb250ZW50Q2hpbGRyZW4sIEhvc3RMaXN0ZW5lciwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBRdWVyeUxpc3QsIEVsZW1lbnRSZWYsIEFmdGVyQ29udGVudEluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtEcm9wZG93bkl0ZW19IGZyb20gJy4vZHJvcGRvd24taXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHtLZXlDb2RlfSBmcm9tICcuLi8uLi9jb21tb24va2V5Y29kZXMnO1xuaW1wb3J0IHtGT0NVU0FCTEVfU0VMRUNUT1J9IGZyb20gJy4vZHJvcGRvd24tdHJpZ2dlci5kaXJlY3RpdmUnO1xuXG4vKipcbiAqIFdyYXBzIHRoZSBjb250ZW50IGFuZCBoYW5kbGVzIGtleWJvYXJkIGNvbnRyb2wgKHRhYmJpbmcgYW5kIGZvY3VzKSBvZiB0aGUgY29udGVudHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZ3R4LWRyb3Bkb3duLWNvbnRlbnQnLFxuICAgIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cInNjcm9sbGVyXCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjwvZGl2PmBcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25Db250ZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gICAgZm9jdXNMb3N0ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICAgIGZvY3VzYWJsZUl0ZW1zOiBIVE1MRWxlbWVudFtdID0gW107XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gRHJvcGRvd25JdGVtKSwgeyByZWFkOiBFbGVtZW50UmVmIH0pIGl0ZW1zOiBRdWVyeUxpc3Q8RWxlbWVudFJlZj47XG5cbiAgICBjb25zdHJ1Y3RvcihwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZikge31cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24nLCBbJyRldmVudCddKVxuICAgIGtleUhhbmRsZXIoZTogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgICAgICBpZiAoZS5rZXlDb2RlID09PSBLZXlDb2RlLlRhYikge1xuICAgICAgICAgICAgaWYgKGUuc2hpZnRLZXkpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmZvY3VzUHJldmlvdXMoZS50YXJnZXQgYXMgSFRNTEVsZW1lbnQsIGUpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICB0aGlzLmZvY3VzTmV4dChlLnRhcmdldCBhcyBIVE1MRWxlbWVudCwgZSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm9jdXNhYmxlSXRlbXMgPSBBcnJheS5mcm9tPEhUTUxFbGVtZW50Pih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yQWxsKEZPQ1VTQUJMRV9TRUxFQ1RPUikpO1xuICAgIH1cblxuICAgIGZvY3VzRmlyc3RJdGVtKCk6IHZvaWQge1xuICAgICAgICBjb25zdCBmaXJzdEl0ZW0gPSB0aGlzLmZvY3VzYWJsZUl0ZW1zWzBdO1xuICAgICAgICBpZiAoZmlyc3RJdGVtICYmIGZpcnN0SXRlbS5mb2N1cykge1xuICAgICAgICAgICAgZmlyc3RJdGVtLmZvY3VzKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBmb2N1c05leHQoY3VycmVudEVsZW1lbnQ6IEhUTUxFbGVtZW50LCBlOiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5mb2N1c2FibGVJdGVtcztcbiAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLmdldEluZGV4T2ZFbGVtZW50KGN1cnJlbnRFbGVtZW50KTtcbiAgICAgICAgaWYgKGluZGV4ID09PSBpdGVtcy5sZW5ndGggLSAxKSB7XG4gICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICB0aGlzLmZvY3VzTG9zdC5lbWl0KHRydWUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgZm9jdXNQcmV2aW91cyhjdXJyZW50RWxlbWVudDogSFRNTEVsZW1lbnQsIGU6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLmdldEluZGV4T2ZFbGVtZW50KGN1cnJlbnRFbGVtZW50KTtcbiAgICAgICAgaWYgKGluZGV4ID09PSAwKSB7XG4gICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICB0aGlzLmZvY3VzTG9zdC5lbWl0KHRydWUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXRJbmRleE9mRWxlbWVudChlbGVtZW50OiBIVE1MRWxlbWVudCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLmZvY3VzYWJsZUl0ZW1zLmluZGV4T2YoZWxlbWVudCk7XG4gICAgfVxufVxuIl19