@clr/angular
Version:
Angular components for Clarity
64 lines • 8.1 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 } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Allows modal overflow area to be scrollable via keyboard.
* The modal body will focus with keyboard navigation only.
* This allows inner focusable items to be focused without
* the overflow scroll being focused.
*/
export class ClrModalBody {
constructor(renderer, host, ngZone) {
this.renderer = renderer;
this.host = host;
this.tabindex = '0';
this.unlisteners = [];
ngZone.runOutsideAngular(() => {
this.observer = new ResizeObserver(() => this.addOrRemoveTabIndex());
this.observer.observe(this.host.nativeElement);
this.unlisteners.push(this.renderer.listen(this.host.nativeElement, 'mouseup', () => {
// set the tabindex binding back when click is completed with mouseup
this.addOrRemoveTabIndex();
}), this.renderer.listen(this.host.nativeElement, 'mousedown', () => {
// tabindex = 0 binding should be removed
// so it won't be focused when click starts with mousedown
this.removeTabIndex();
}));
});
}
ngOnDestroy() {
while (this.unlisteners.length) {
this.unlisteners.pop()();
}
this.observer.disconnect();
this.observer = null;
}
addTabIndex() {
this.renderer.setAttribute(this.host.nativeElement, 'tabindex', this.tabindex);
}
removeTabIndex() {
this.renderer.removeAttribute(this.host.nativeElement, 'tabindex');
}
addOrRemoveTabIndex() {
const modalBody = this.host.nativeElement.parentElement;
if (modalBody && modalBody.clientHeight < modalBody.scrollHeight) {
this.addTabIndex();
}
else {
this.removeTabIndex();
}
}
}
ClrModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalBody, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
ClrModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrModalBody, selector: ".modal-body", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalBody, decorators: [{
type: Directive,
args: [{
selector: '.modal-body',
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtYm9keS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL21vZGFsL21vZGFsLWJvZHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFBRSxTQUFTLEVBQTRDLE1BQU0sZUFBZSxDQUFDOztBQUVwRjs7Ozs7R0FLRztBQUlILE1BQU0sT0FBTyxZQUFZO0lBS3ZCLFlBQTZCLFFBQW1CLEVBQW1CLElBQTZCLEVBQUUsTUFBYztRQUFuRixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQW1CLFNBQUksR0FBSixJQUFJLENBQXlCO1FBSnhGLGFBQVEsR0FBRyxHQUFHLENBQUM7UUFDZixnQkFBVyxHQUFtQixFQUFFLENBQUM7UUFJdkMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUUvQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRTtnQkFDNUQscUVBQXFFO2dCQUNyRSxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUM3QixDQUFDLENBQUMsRUFDRixJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxXQUFXLEVBQUUsR0FBRyxFQUFFO2dCQUM5RCx5Q0FBeUM7Z0JBQ3pDLDBEQUEwRDtnQkFDMUQsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3hCLENBQUMsQ0FBQyxDQUNILENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sRUFBRTtZQUM5QixJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUM7U0FDMUI7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3ZCLENBQUM7SUFFTyxXQUFXO1FBQ2pCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLFVBQVUsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDakYsQ0FBQztJQUVPLGNBQWM7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDckUsQ0FBQztJQUVPLG1CQUFtQjtRQUN6QixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUM7UUFFeEQsSUFBSSxTQUFTLElBQUksU0FBUyxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUMsWUFBWSxFQUFFO1lBQ2hFLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjthQUFNO1lBQ0wsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQzs7eUdBakRVLFlBQVk7NkZBQVosWUFBWTsyRkFBWixZQUFZO2tCQUh4QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxhQUFhO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtMjAyMyBWTXdhcmUsIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqIFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gKiBUaGUgZnVsbCBsaWNlbnNlIGluZm9ybWF0aW9uIGNhbiBiZSBmb3VuZCBpbiBMSUNFTlNFIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHByb2plY3QuXG4gKi9cblxuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBOZ1pvbmUsIE9uRGVzdHJveSwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogQWxsb3dzIG1vZGFsIG92ZXJmbG93IGFyZWEgdG8gYmUgc2Nyb2xsYWJsZSB2aWEga2V5Ym9hcmQuXG4gKiBUaGUgbW9kYWwgYm9keSB3aWxsIGZvY3VzIHdpdGgga2V5Ym9hcmQgbmF2aWdhdGlvbiBvbmx5LlxuICogVGhpcyBhbGxvd3MgaW5uZXIgZm9jdXNhYmxlIGl0ZW1zIHRvIGJlIGZvY3VzZWQgd2l0aG91dFxuICogdGhlIG92ZXJmbG93IHNjcm9sbCBiZWluZyBmb2N1c2VkLlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICcubW9kYWwtYm9keScsXG59KVxuZXhwb3J0IGNsYXNzIENsck1vZGFsQm9keSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgdGFiaW5kZXggPSAnMCc7XG4gIHByaXZhdGUgdW5saXN0ZW5lcnM6IFZvaWRGdW5jdGlvbltdID0gW107XG4gIHByaXZhdGUgb2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcHJpdmF0ZSByZWFkb25seSBob3N0OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Piwgbmdab25lOiBOZ1pvbmUpIHtcbiAgICBuZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgdGhpcy5vYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcigoKSA9PiB0aGlzLmFkZE9yUmVtb3ZlVGFiSW5kZXgoKSk7XG4gICAgICB0aGlzLm9ic2VydmVyLm9ic2VydmUodGhpcy5ob3N0Lm5hdGl2ZUVsZW1lbnQpO1xuXG4gICAgICB0aGlzLnVubGlzdGVuZXJzLnB1c2goXG4gICAgICAgIHRoaXMucmVuZGVyZXIubGlzdGVuKHRoaXMuaG9zdC5uYXRpdmVFbGVtZW50LCAnbW91c2V1cCcsICgpID0+IHtcbiAgICAgICAgICAvLyBzZXQgdGhlIHRhYmluZGV4IGJpbmRpbmcgYmFjayB3aGVuIGNsaWNrIGlzIGNvbXBsZXRlZCB3aXRoIG1vdXNldXBcbiAgICAgICAgICB0aGlzLmFkZE9yUmVtb3ZlVGFiSW5kZXgoKTtcbiAgICAgICAgfSksXG4gICAgICAgIHRoaXMucmVuZGVyZXIubGlzdGVuKHRoaXMuaG9zdC5uYXRpdmVFbGVtZW50LCAnbW91c2Vkb3duJywgKCkgPT4ge1xuICAgICAgICAgIC8vIHRhYmluZGV4ID0gMCBiaW5kaW5nIHNob3VsZCBiZSByZW1vdmVkXG4gICAgICAgICAgLy8gc28gaXQgd29uJ3QgYmUgZm9jdXNlZCB3aGVuIGNsaWNrIHN0YXJ0cyB3aXRoIG1vdXNlZG93blxuICAgICAgICAgIHRoaXMucmVtb3ZlVGFiSW5kZXgoKTtcbiAgICAgICAgfSlcbiAgICAgICk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB3aGlsZSAodGhpcy51bmxpc3RlbmVycy5sZW5ndGgpIHtcbiAgICAgIHRoaXMudW5saXN0ZW5lcnMucG9wKCkoKTtcbiAgICB9XG5cbiAgICB0aGlzLm9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgICB0aGlzLm9ic2VydmVyID0gbnVsbDtcbiAgfVxuXG4gIHByaXZhdGUgYWRkVGFiSW5kZXgoKSB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5ob3N0Lm5hdGl2ZUVsZW1lbnQsICd0YWJpbmRleCcsIHRoaXMudGFiaW5kZXgpO1xuICB9XG5cbiAgcHJpdmF0ZSByZW1vdmVUYWJJbmRleCgpIHtcbiAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUF0dHJpYnV0ZSh0aGlzLmhvc3QubmF0aXZlRWxlbWVudCwgJ3RhYmluZGV4Jyk7XG4gIH1cblxuICBwcml2YXRlIGFkZE9yUmVtb3ZlVGFiSW5kZXgoKSB7XG4gICAgY29uc3QgbW9kYWxCb2R5ID0gdGhpcy5ob3N0Lm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudDtcblxuICAgIGlmIChtb2RhbEJvZHkgJiYgbW9kYWxCb2R5LmNsaWVudEhlaWdodCA8IG1vZGFsQm9keS5zY3JvbGxIZWlnaHQpIHtcbiAgICAgIHRoaXMuYWRkVGFiSW5kZXgoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW1vdmVUYWJJbmRleCgpO1xuICAgIH1cbiAgfVxufVxuIl19