123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- import { Directive, EventEmitter, HostListener, Input, Output, } from '@angular/core';
- import { TemplatePortal } from '@angular/cdk/portal';
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
- import { debounceTime, fromEvent } from 'rxjs';
- import * as i0 from "@angular/core";
- import * as i1 from "@angular/cdk/overlay";
- export class OverlayDirective {
- constructor(overlay, elementRef, viewContainerRef, destroyRef) {
- this.overlay = overlay;
- this.elementRef = elementRef;
- this.viewContainerRef = viewContainerRef;
- this.destroyRef = destroyRef;
- this.verticalPositions = {
- bottomStart: {
- originX: 'start',
- originY: 'bottom',
- overlayX: 'start',
- overlayY: 'top',
- panelClass: 'vertical-overlay',
- },
- topStart: {
- originX: 'start',
- originY: 'top',
- overlayX: 'start',
- overlayY: 'bottom',
- panelClass: 'vertical-overlay',
- },
- bottomEnd: {
- originX: 'end',
- originY: 'bottom',
- overlayX: 'end',
- overlayY: 'top',
- panelClass: 'vertical-overlay',
- },
- topEnd: {
- originX: 'end',
- originY: 'top',
- overlayX: 'end',
- overlayY: 'bottom',
- panelClass: 'vertical-overlay',
- },
- };
- this.horizontalPositions = {
- bottomStart: {
- originX: 'end',
- originY: 'bottom',
- overlayX: 'start',
- overlayY: 'bottom',
- offsetY: 7,
- },
- topStart: {
- originX: 'start',
- originY: 'bottom',
- overlayX: 'end',
- overlayY: 'bottom',
- },
- };
- this.overlayRef = null;
- this.position = 'horizontal';
- this.closeOnClick = false;
- this.opened = new EventEmitter();
- this.closed = new EventEmitter();
- }
- show() {
- this.openDropdown();
- this.opened.emit();
- }
- openDropdown() {
- if (!this.overlayRef) {
- this.overlayRef = this.overlay.create({
- positionStrategy: this.getOverlayPosition(),
- });
- this.overlayRef
- .outsidePointerEvents()
- .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
- .subscribe(() => {
- this.closeDropdown();
- this.closed.emit();
- });
- fromEvent(this.overlayRef.hostElement, 'click')
- .pipe(takeUntilDestroyed(this.destroyRef))
- .subscribe(() => {
- if (this.closeOnClick)
- this.closeDropdown();
- });
- }
- if (this.contentTemplate && !this.overlayRef.hasAttached()) {
- const portal = new TemplatePortal(this.contentTemplate, this.viewContainerRef);
- this.overlayRef.attach(portal);
- }
- }
- closeDropdown() {
- if (this.overlayRef?.hasAttached()) {
- this.overlayRef.detach();
- }
- }
- getOverlayPosition() {
- const positions = this.position === 'horizontal' ? this.horizontalPositions : this.verticalPositions;
- return this.overlay
- .position()
- .flexibleConnectedTo(this.elementRef)
- .withPositions(Object.keys(positions).map(positionKey => positions[positionKey]));
- }
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: OverlayDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: OverlayDirective, isStandalone: true, selector: "[ctOverlay]", inputs: { contentTemplate: ["ctOverlay", "contentTemplate"], position: ["ctOverlayPosition", "position"], closeOnClick: ["ctOverlayCloseOnClick", "closeOnClick"] }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "show()" } }, ngImport: i0 }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: OverlayDirective, decorators: [{
- type: Directive,
- args: [{
- selector: '[ctOverlay]',
- standalone: true,
- }]
- }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.DestroyRef }], propDecorators: { contentTemplate: [{
- type: Input,
- args: ['ctOverlay']
- }], position: [{
- type: Input,
- args: ['ctOverlayPosition']
- }], closeOnClick: [{
- type: Input,
- args: ['ctOverlayCloseOnClick']
- }], opened: [{
- type: Output
- }], closed: [{
- type: Output
- }], show: [{
- type: HostListener,
- args: ['click']
- }] } });
|