@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
124 lines (120 loc) • 10.7 kB
JavaScript
import { AnimationBuilder } from '@angular/animations';
import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';
import { inject, ElementRef, DOCUMENT, ChangeDetectorRef, NgZone, HostBinding, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocFocusControlComponent } from '@ng-doc/ui-kit/components/focus-control';
import { NgDocOverlayPointerComponent } from '@ng-doc/ui-kit/components/overlay-pointer';
import { NgDocEventSwitcherDirective } from '@ng-doc/ui-kit/directives/event-switcher';
import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
import { toElement } from '@ng-doc/ui-kit/helpers';
import { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';
import { NgDocOverlayUtils, NgDocFocusUtils } from '@ng-doc/ui-kit/utils';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule, PolymorpheusOutletDirective } from '@tinkoff/ng-polymorpheus';
import { Subject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
class NgDocOverlayContainerComponent {
constructor() {
this.elementRef = inject(ElementRef);
this.documentRef = inject(DOCUMENT);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.ngZone = inject(NgZone);
this.animationBuilder = inject(AnimationBuilder);
this.content = '';
this.relativePosition = null;
this.animationEvent$ = new Subject();
this.isOpened = true;
}
ngOnInit() {
if (this.config?.positionStrategy instanceof FlexibleConnectedPositionStrategy) {
this.config.positionStrategy.positionChanges
.pipe(distinctUntilChanged((a, b) => a.connectionPair === b.connectionPair), ngDocZoneOptimize(this.ngZone))
.subscribe((change) => {
this.currentPosition = NgDocOverlayUtils.getOverlayPosition(change.connectionPair);
this.relativePosition = NgDocOverlayUtils.getRelativePosition(this.currentPosition);
this.changeDetectorRef.markForCheck();
});
}
}
ngAfterViewInit() {
this.runAnimation(this.config?.openAnimation || []);
}
get contactBorder() {
return !!this.config?.contactBorder;
}
get isFocused() {
return !!this.focusCatcher?.focused;
}
get animationEvent() {
return this.animationEvent$.asObservable();
}
get overlayAlign() {
return this.currentPosition
? NgDocOverlayUtils.getPositionAlign(NgDocOverlayUtils.toConnectedPosition(this.currentPosition))
: null;
}
close() {
if (this.isOpened) {
this.runAnimation(this.config?.closeAnimation || [], true);
this.isOpened = false;
this.changeDetectorRef.markForCheck();
}
}
focus() {
if (this.contentContainer) {
NgDocFocusUtils.focusClosestElement(toElement(this.contentContainer), toElement(this.contentContainer));
}
}
markForCheck() {
this.changeDetectorRef.markForCheck();
}
runAnimation(animation, close = false) {
const player = this.animationBuilder
.build(animation)
.create(this.elementRef.nativeElement);
player.onStart(() => this.animationEvent$.next(close ? 'beforeClose' : 'beforeOpen'));
player.onDone(() => this.animationEvent$.next(close ? 'afterClose' : 'afterOpen'));
player.play();
}
ngOnDestroy() {
if (this.isFocused && this.config && this.config.viewContainerRef) {
NgDocFocusUtils.focusClosestElement(this.config.viewContainerRef.element.nativeElement, this.documentRef.body, false);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocOverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgDocOverlayContainerComponent, isStandalone: true, selector: "ng-doc-overlay-container", inputs: { content: "content", config: "config" }, host: { properties: { "attr.data-ng-doc-overlay-position": "this.relativePosition", "attr.data-ng-doc-overlay-with-contact-border": "this.contactBorder" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "focusCatcher", first: true, predicate: NgDocFocusCatcherDirective, descendants: true }, { propertyName: "outlet", first: true, predicate: PolymorpheusOutletDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-doc-overlay-pointer\n\t[overlayPosition]=\"relativePosition\"\n\t[overlayAlign]=\"overlayAlign\"\n\t[withPointer]=\"!!config?.withPointer\"\n\t[ngDocEventSwitcher]=\"config?.viewContainerRef?.element?.nativeElement ?? null\"\n\t[events]=\"['focusin', 'focusout', 'keydown', 'scroll']\">\n\t<ng-doc-focus-control\n\t\t[focusHost]=\"this.config?.viewContainerRef?.element?.nativeElement ?? null\"\n\t\tngDocFocusCatcher>\n\t\t<div class=\"ng-doc-overlay-content\" [tabIndex]=\"-1\" #contentContainer>\n\t\t\t<ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n\t\t</div>\n\t</ng-doc-focus-control>\n</ng-doc-overlay-pointer>\n", styles: [":host{display:block;height:auto;width:100%}.ng-doc-overlay-content{width:100%;height:100%;background-color:var(--ng-doc-overlay-background);border:1px solid var(--ng-doc-overlay-border);border-radius:var(--ng-doc-overlay-border-radius);box-shadow:var(--ng-doc-overlay-shadow);overflow:auto}:host[data-ng-doc-overlay-position=top]{transform-origin:bottom}:host[data-ng-doc-overlay-position=top][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-bottom:none}:host[data-ng-doc-overlay-position=bottom]{transform-origin:top}:host[data-ng-doc-overlay-position=bottom][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-top:none}:host[data-ng-doc-overlay-position=left]{transform-origin:right}:host[data-ng-doc-overlay-position=left][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-right:none}:host[data-ng-doc-overlay-position=right]{transform-origin:left}:host[data-ng-doc-overlay-position=right][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-left:none}\n"], dependencies: [{ kind: "component", type: NgDocOverlayPointerComponent, selector: "ng-doc-overlay-pointer", inputs: ["overlayPosition", "overlayAlign", "withPointer"] }, { kind: "directive", type: NgDocEventSwitcherDirective, selector: "[ngDocEventSwitcher]", inputs: ["ngDocEventSwitcher", "events"] }, { kind: "component", type: NgDocFocusControlComponent, selector: "ng-doc-focus-control", inputs: ["focusHost"] }, { kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocOverlayContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-overlay-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocOverlayPointerComponent,
NgDocEventSwitcherDirective,
NgDocFocusControlComponent,
NgDocFocusCatcherDirective,
PolymorpheusModule,
], template: "<ng-doc-overlay-pointer\n\t[overlayPosition]=\"relativePosition\"\n\t[overlayAlign]=\"overlayAlign\"\n\t[withPointer]=\"!!config?.withPointer\"\n\t[ngDocEventSwitcher]=\"config?.viewContainerRef?.element?.nativeElement ?? null\"\n\t[events]=\"['focusin', 'focusout', 'keydown', 'scroll']\">\n\t<ng-doc-focus-control\n\t\t[focusHost]=\"this.config?.viewContainerRef?.element?.nativeElement ?? null\"\n\t\tngDocFocusCatcher>\n\t\t<div class=\"ng-doc-overlay-content\" [tabIndex]=\"-1\" #contentContainer>\n\t\t\t<ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n\t\t</div>\n\t</ng-doc-focus-control>\n</ng-doc-overlay-pointer>\n", styles: [":host{display:block;height:auto;width:100%}.ng-doc-overlay-content{width:100%;height:100%;background-color:var(--ng-doc-overlay-background);border:1px solid var(--ng-doc-overlay-border);border-radius:var(--ng-doc-overlay-border-radius);box-shadow:var(--ng-doc-overlay-shadow);overflow:auto}:host[data-ng-doc-overlay-position=top]{transform-origin:bottom}:host[data-ng-doc-overlay-position=top][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-bottom:none}:host[data-ng-doc-overlay-position=bottom]{transform-origin:top}:host[data-ng-doc-overlay-position=bottom][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-top:none}:host[data-ng-doc-overlay-position=left]{transform-origin:right}:host[data-ng-doc-overlay-position=left][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-right:none}:host[data-ng-doc-overlay-position=right]{transform-origin:left}:host[data-ng-doc-overlay-position=right][data-ng-doc-overlay-with-contact-border=false] .ng-doc-overlay-content{border-left:none}\n"] }]
}], ctorParameters: () => [], propDecorators: { content: [{
type: Input
}], config: [{
type: Input
}], contentContainer: [{
type: ViewChild,
args: ['contentContainer', { read: ElementRef, static: true }]
}], focusCatcher: [{
type: ViewChild,
args: [NgDocFocusCatcherDirective]
}], outlet: [{
type: ViewChild,
args: [PolymorpheusOutletDirective, { static: true }]
}], relativePosition: [{
type: HostBinding,
args: ['attr.data-ng-doc-overlay-position']
}], contactBorder: [{
type: HostBinding,
args: ['attr.data-ng-doc-overlay-with-contact-border']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocOverlayContainerComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-overlay-container.mjs.map