@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>
250 lines (246 loc) • 11.6 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { FlexibleConnectedPositionStrategy, CdkOverlayOrigin } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';
import { EventEmitter, ChangeDetectorRef, ViewContainerRef, NgZone, Component, ChangeDetectionStrategy, Inject, Optional, Input, Output, HostBinding, HostListener } from '@angular/core';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { dropdownOpenAnimation } from '@ng-doc/ui-kit/animations';
import * as i2 from '@ng-doc/ui-kit/classes/overlay-host';
import { NgDocOverlayHost } from '@ng-doc/ui-kit/classes/overlay-host';
import { NgDocOverlayContainerComponent } from '@ng-doc/ui-kit/components/overlay-container';
import { toElement, mergeOverlayConfigs } from '@ng-doc/ui-kit/helpers';
import { ngDocZoneDetach } from '@ng-doc/ui-kit/observables';
import * as i1 from '@ng-doc/ui-kit/services/overlay';
import { NgDocOverlayService } from '@ng-doc/ui-kit/services/overlay';
import { NgDocOverlayUtils } from '@ng-doc/ui-kit/utils';
import { UntilDestroy } from '@ngneat/until-destroy';
let NgDocDropdownComponent = class NgDocDropdownComponent {
constructor(changeDetectorRef, overlayService, viewContainerRef, ngZone, overlayHost) {
this.changeDetectorRef = changeDetectorRef;
this.overlayService = overlayService;
this.viewContainerRef = viewContainerRef;
this.ngZone = ngZone;
this.overlayHost = overlayHost;
this.content = '';
this.origin = null;
this.closeIfOutsideClick = true;
this.closeIfInnerClick = false;
this.withArrow = false;
this.borderOffset = -8;
this.panelClass = [];
this.contactBorder = true;
this.hasBackdrop = false;
this.positions = [
'bottom-center',
'top-center',
'right-center',
'left-center',
];
this.minHeight = '';
this.maxHeight = '';
this.height = '';
this.minWidth = '';
this.maxWidth = '';
this.width = '';
this.beforeOpen = new EventEmitter();
this.afterOpen = new EventEmitter();
this.beforeClose = new EventEmitter();
this.afterClose = new EventEmitter();
this.overlay = null;
this.overlayProperties = this.getOverlayProperties();
}
ngOnChanges({ origin }) {
if (origin && origin.currentValue !== origin.previousValue) {
if (!origin.currentValue) {
this.origin = origin.previousValue;
}
if (this.overlay) {
const positionStrategy = this.overlay.overlayRef.getConfig().positionStrategy;
if (positionStrategy instanceof FlexibleConnectedPositionStrategy && this.currentOrigin) {
this.overlay.overlayRef.updatePositionStrategy(positionStrategy.setOrigin(this.currentOrigin));
}
}
}
this.updateOverlayPosition();
}
get tabIndex() {
return this.isOpened ? 0 : -1;
}
focus() {
this.overlay?.focus();
}
get isFocused() {
return !!this.overlay?.isFocused;
}
open() {
if (!this.overlay?.hasAttached) {
const config = this.getConfig();
this.overlay = this.overlayService.open(this.content, config);
this.beforeOpen.emit();
this.overlay
?.afterOpen()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.afterOpen.emit());
this.overlay
?.beforeClose()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.beforeClose.emit());
this.overlay
?.afterClose()
.pipe(ngDocZoneDetach(this.ngZone))
.subscribe(() => this.afterClose.emit());
this.overlay.beforeClose().subscribe(() => this.close());
this.changeDetectorRef.markForCheck();
}
}
close() {
if (this.isOpened) {
this.overlay?.close();
this.changeDetectorRef.markForCheck();
}
}
toggle() {
this.isOpened ? this.close() : this.open();
}
get isOpened() {
return this.overlay?.isOpened === true;
}
updateOverlayPosition() {
if (this.overlay && this.overlay.hasAttached) {
this.overlay.overlayRef.updateSize(this.getConfig());
this.overlay.overlayRef.updatePosition();
}
}
get currentOrigin() {
return this.origin instanceof CdkOverlayOrigin
? this.origin.elementRef.nativeElement
: this.origin || this.overlayHost?.origin || null;
}
getPositions(positions, border) {
const origin = toElement(this.currentOrigin);
if (origin instanceof HTMLElement) {
return NgDocOverlayUtils.getConnectedPosition(!!positions && asArray(positions).length
? positions
: ['bottom-center', 'top-center', 'right-center', 'left-center'], origin, border * -1, this.withArrow);
}
else {
return !!positions && asArray(positions).length
? asArray(positions)
: ['bottom-center', 'top-center', 'right-center', 'left-center'];
}
}
getConfig() {
const overlayProperties = mergeOverlayConfigs(this.overlayProperties, this.getOverlayProperties(), this.overlayHost);
if (!this.currentOrigin) {
throw new Error('Origin for the dropdown was not provided.');
}
return {
overlayContainer: NgDocOverlayContainerComponent,
positionStrategy: this.overlayService.connectedPositionStrategy(this.currentOrigin, this.getPositions(overlayProperties.positions || [], overlayProperties.borderOffset || 0)),
scrollStrategy: this.overlayService.scrollStrategy().reposition(),
viewContainerRef: this.viewContainerRef,
openAnimation: dropdownOpenAnimation,
hasBackdrop: this.hasBackdrop,
...overlayProperties,
panelClass: [
'ng-doc-dropdown',
...asArray(this.panelClass),
...asArray(this.overlayHost?.panelClass),
],
};
}
getOverlayProperties() {
return {
origin: this.currentOrigin || undefined,
positions: this.positions,
closeIfOutsideClick: this.closeIfOutsideClick,
closeIfInnerClick: this.closeIfInnerClick,
withPointer: this.withArrow,
contactBorder: this.contactBorder,
borderOffset: this.borderOffset,
panelClass: this.panelClass,
width: this.width,
height: this.height,
minWidth: this.minWidth,
minHeight: this.minHeight,
maxWidth: this.maxWidth,
maxHeight: this.maxHeight,
disposeOnNavigation: true,
disposeOnRouteNavigation: true,
};
}
ngOnDestroy() {
if (this.overlay) {
this.overlay.overlayRef.dispose();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgDocOverlayService }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: NgDocOverlayHost, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocDropdownComponent, isStandalone: true, selector: "ng-doc-dropdown", inputs: { content: "content", origin: "origin", closeIfOutsideClick: "closeIfOutsideClick", closeIfInnerClick: "closeIfInnerClick", withArrow: "withArrow", borderOffset: "borderOffset", panelClass: "panelClass", contactBorder: "contactBorder", hasBackdrop: "hasBackdrop", positions: "positions", minHeight: "minHeight", maxHeight: "maxHeight", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", width: "width" }, outputs: { beforeOpen: "beforeOpen", afterOpen: "afterOpen", beforeClose: "beforeClose", afterClose: "afterClose" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabIndex": "this.tabIndex" } }, providers: [NgDocOverlayService], usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: ["::ng-deep .ng-doc-dropdown{--ng-doc-overlay-background: var(--ng-doc-background);--ng-doc-overlay-border: var(--ng-doc-base-2);--ng-doc-overlay-border-radius: var(--ng-doc-base-gutter);--ng-doc-overlay-shadow: 0px 12px 16px -4px rgba(16, 24, 40, .08), 0px 4px 6px -2px rgba(16, 24, 40, .03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
NgDocDropdownComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [ChangeDetectorRef,
NgDocOverlayService,
ViewContainerRef,
NgZone,
NgDocOverlayHost])
], NgDocDropdownComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocDropdownComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-dropdown', template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgDocOverlayService], standalone: true, styles: ["::ng-deep .ng-doc-dropdown{--ng-doc-overlay-background: var(--ng-doc-background);--ng-doc-overlay-border: var(--ng-doc-base-2);--ng-doc-overlay-border-radius: var(--ng-doc-base-gutter);--ng-doc-overlay-shadow: 0px 12px 16px -4px rgba(16, 24, 40, .08), 0px 4px 6px -2px rgba(16, 24, 40, .03)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NgDocOverlayService }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.NgDocOverlayHost, decorators: [{
type: Inject,
args: [NgDocOverlayHost]
}, {
type: Optional
}] }], propDecorators: { content: [{
type: Input
}], origin: [{
type: Input
}], closeIfOutsideClick: [{
type: Input
}], closeIfInnerClick: [{
type: Input
}], withArrow: [{
type: Input
}], borderOffset: [{
type: Input
}], panelClass: [{
type: Input
}], contactBorder: [{
type: Input
}], hasBackdrop: [{
type: Input
}], positions: [{
type: Input
}], minHeight: [{
type: Input
}], maxHeight: [{
type: Input
}], height: [{
type: Input
}], minWidth: [{
type: Input
}], maxWidth: [{
type: Input
}], width: [{
type: Input
}], beforeOpen: [{
type: Output
}], afterOpen: [{
type: Output
}], beforeClose: [{
type: Output
}], afterClose: [{
type: Output
}], tabIndex: [{
type: HostBinding,
args: ['attr.tabIndex']
}], focus: [{
type: HostListener,
args: ['focus']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocDropdownComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-dropdown.mjs.map