UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

498 lines (487 loc) 25.9 kB
import { __decorate } from 'tslib'; import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; import { TemplatePortal } from '@angular/cdk/portal'; import * as i0 from '@angular/core'; import { EventEmitter, booleanAttribute, Directive, Input, Output, NgModule, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Injectable } from '@angular/core'; import { Subject, BehaviorSubject, merge, fromEvent, EMPTY, combineLatest, Subscription } from 'rxjs'; import { mapTo, map, switchMap, filter, auditTime, distinctUntilChanged, takeUntil, first } from 'rxjs/operators'; import * as i1 from 'ng-zorro-antd/core/config'; import { WithConfig } from 'ng-zorro-antd/core/config'; import { POSITION_MAP } from 'ng-zorro-antd/core/overlay'; import * as i2 from '@angular/cdk/overlay'; import { ConnectionPositionPair } from '@angular/cdk/overlay'; import * as i3 from '@angular/cdk/platform'; import * as i1$1 from 'ng-zorro-antd/menu'; import { MenuService, NzIsMenuInsideDropDownToken, NzMenuModule } from 'ng-zorro-antd/menu'; import { NzButtonGroupComponent } from 'ng-zorro-antd/button'; import { NgClass, NgStyle } from '@angular/common'; import { slideMotion } from 'ng-zorro-antd/core/animation'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import * as i2$1 from '@angular/cdk/bidi'; const NZ_CONFIG_MODULE_NAME = 'dropDown'; const listOfPositions = [ POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topRight, POSITION_MAP.topLeft ]; class NzDropDownDirective { setDropdownMenuValue(key, value) { if (this.nzDropdownMenu) { this.nzDropdownMenu.setValue(key, value); } } constructor(nzConfigService, elementRef, overlay, renderer, viewContainerRef, platform) { this.nzConfigService = nzConfigService; this.elementRef = elementRef; this.overlay = overlay; this.renderer = renderer; this.viewContainerRef = viewContainerRef; this.platform = platform; this._nzModuleName = NZ_CONFIG_MODULE_NAME; this.overlayRef = null; this.destroy$ = new Subject(); this.positionStrategy = this.overlay .position() .flexibleConnectedTo(this.elementRef.nativeElement) .withLockedPosition() .withTransformOriginOn('.ant-dropdown'); this.inputVisible$ = new BehaviorSubject(false); this.nzTrigger$ = new BehaviorSubject('hover'); this.overlayClose$ = new Subject(); this.nzDropdownMenu = null; this.nzTrigger = 'hover'; this.nzMatchWidthElement = null; this.nzBackdrop = false; this.nzClickHide = true; this.nzDisabled = false; this.nzVisible = false; this.nzOverlayClassName = ''; this.nzOverlayStyle = {}; this.nzPlacement = 'bottomLeft'; this.nzVisibleChange = new EventEmitter(); } ngAfterViewInit() { if (this.nzDropdownMenu) { const nativeElement = this.elementRef.nativeElement; /** host mouse state **/ const hostMouseState$ = merge(fromEvent(nativeElement, 'mouseenter').pipe(mapTo(true)), fromEvent(nativeElement, 'mouseleave').pipe(mapTo(false))); /** menu mouse state **/ const menuMouseState$ = this.nzDropdownMenu.mouseState$; /** merged mouse state **/ const mergedMouseState$ = merge(menuMouseState$, hostMouseState$); /** host click state **/ const hostClickState$ = fromEvent(nativeElement, 'click').pipe(map(() => !this.nzVisible)); /** visible state switch by nzTrigger **/ const visibleStateByTrigger$ = this.nzTrigger$.pipe(switchMap(trigger => { if (trigger === 'hover') { return mergedMouseState$; } else if (trigger === 'click') { return hostClickState$; } else { return EMPTY; } })); const descendantMenuItemClick$ = this.nzDropdownMenu.descendantMenuItemClick$.pipe(filter(() => this.nzClickHide), mapTo(false)); const domTriggerVisible$ = merge(visibleStateByTrigger$, descendantMenuItemClick$, this.overlayClose$).pipe(filter(() => !this.nzDisabled)); const visible$ = merge(this.inputVisible$, domTriggerVisible$); combineLatest([visible$, this.nzDropdownMenu.isChildSubMenuOpen$]) .pipe(map(([visible, sub]) => visible || sub), auditTime(150), distinctUntilChanged(), filter(() => this.platform.isBrowser), takeUntil(this.destroy$)) .subscribe((visible) => { const element = this.nzMatchWidthElement ? this.nzMatchWidthElement.nativeElement : nativeElement; const triggerWidth = element.getBoundingClientRect().width; if (this.nzVisible !== visible) { this.nzVisibleChange.emit(visible); } this.nzVisible = visible; if (visible) { /** set up overlayRef **/ if (!this.overlayRef) { /** new overlay **/ this.overlayRef = this.overlay.create({ positionStrategy: this.positionStrategy, minWidth: triggerWidth, disposeOnNavigation: true, hasBackdrop: this.nzBackdrop && this.nzTrigger === 'click', scrollStrategy: this.overlay.scrollStrategies.reposition() }); merge(this.overlayRef.backdropClick(), this.overlayRef.detachments(), this.overlayRef .outsidePointerEvents() .pipe(filter((e) => !this.elementRef.nativeElement.contains(e.target))), this.overlayRef.keydownEvents().pipe(filter(e => e.keyCode === ESCAPE && !hasModifierKey(e)))) .pipe(takeUntil(this.destroy$)) .subscribe(() => { this.overlayClose$.next(false); }); } else { /** update overlay config **/ const overlayConfig = this.overlayRef.getConfig(); overlayConfig.minWidth = triggerWidth; } /** open dropdown with animation **/ this.positionStrategy.withPositions([POSITION_MAP[this.nzPlacement], ...listOfPositions]); /** reset portal if needed **/ if (!this.portal || this.portal.templateRef !== this.nzDropdownMenu.templateRef) { this.portal = new TemplatePortal(this.nzDropdownMenu.templateRef, this.viewContainerRef); } this.overlayRef.attach(this.portal); } else { /** detach overlayRef if needed **/ if (this.overlayRef) { this.overlayRef.detach(); } } }); this.nzDropdownMenu.animationStateChange$.pipe(takeUntil(this.destroy$)).subscribe(event => { if (event.toState === 'void') { if (this.overlayRef) { this.overlayRef.dispose(); } this.overlayRef = null; } }); } } ngOnDestroy() { this.destroy$.next(true); this.destroy$.complete(); if (this.overlayRef) { this.overlayRef.dispose(); this.overlayRef = null; } } ngOnChanges(changes) { const { nzVisible, nzDisabled, nzOverlayClassName, nzOverlayStyle, nzTrigger } = changes; if (nzTrigger) { this.nzTrigger$.next(this.nzTrigger); } if (nzVisible) { this.inputVisible$.next(this.nzVisible); } if (nzDisabled) { const nativeElement = this.elementRef.nativeElement; if (this.nzDisabled) { this.renderer.setAttribute(nativeElement, 'disabled', ''); this.inputVisible$.next(false); } else { this.renderer.removeAttribute(nativeElement, 'disabled'); } } if (nzOverlayClassName) { this.setDropdownMenuValue('nzOverlayClassName', this.nzOverlayClassName); } if (nzOverlayStyle) { this.setDropdownMenuValue('nzOverlayStyle', this.nzOverlayStyle); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownDirective, deps: [{ token: i1.NzConfigService }, { token: i0.ElementRef }, { token: i2.Overlay }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i3.Platform }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: NzDropDownDirective, isStandalone: true, selector: "[nz-dropdown]", inputs: { nzDropdownMenu: "nzDropdownMenu", nzTrigger: "nzTrigger", nzMatchWidthElement: "nzMatchWidthElement", nzBackdrop: ["nzBackdrop", "nzBackdrop", booleanAttribute], nzClickHide: ["nzClickHide", "nzClickHide", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzVisible: ["nzVisible", "nzVisible", booleanAttribute], nzOverlayClassName: "nzOverlayClassName", nzOverlayStyle: "nzOverlayStyle", nzPlacement: "nzPlacement" }, outputs: { nzVisibleChange: "nzVisibleChange" }, host: { classAttribute: "ant-dropdown-trigger" }, exportAs: ["nzDropdown"], usesOnChanges: true, ngImport: i0 }); } } __decorate([ WithConfig() ], NzDropDownDirective.prototype, "nzBackdrop", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownDirective, decorators: [{ type: Directive, args: [{ selector: '[nz-dropdown]', exportAs: 'nzDropdown', host: { class: 'ant-dropdown-trigger' }, standalone: true }] }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ElementRef }, { type: i2.Overlay }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i3.Platform }], propDecorators: { nzDropdownMenu: [{ type: Input }], nzTrigger: [{ type: Input }], nzMatchWidthElement: [{ type: Input }], nzBackdrop: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzClickHide: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzDisabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzVisible: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOverlayClassName: [{ type: Input }], nzOverlayStyle: [{ type: Input }], nzPlacement: [{ type: Input }], nzVisibleChange: [{ type: Output }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzContextMenuServiceModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuServiceModule }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuServiceModule }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuServiceModule, decorators: [{ type: NgModule }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzDropDownADirective { constructor() { } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownADirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: NzDropDownADirective, isStandalone: true, selector: "a[nz-dropdown]", host: { classAttribute: "ant-dropdown-link" }, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownADirective, decorators: [{ type: Directive, args: [{ selector: 'a[nz-dropdown]', host: { class: 'ant-dropdown-link' }, standalone: true }] }], ctorParameters: () => [] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzDropdownButtonDirective { constructor(renderer, elementRef) { this.renderer = renderer; this.elementRef = elementRef; this.nzButtonGroupComponent = inject(NzButtonGroupComponent, { host: true, optional: true }); } ngAfterViewInit() { const parentElement = this.renderer.parentNode(this.elementRef.nativeElement); if (this.nzButtonGroupComponent && parentElement) { this.renderer.addClass(parentElement, 'ant-dropdown-button'); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropdownButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: NzDropdownButtonDirective, isStandalone: true, selector: "[nz-button][nz-dropdown]", ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropdownButtonDirective, decorators: [{ type: Directive, args: [{ selector: '[nz-button][nz-dropdown]', standalone: true }] }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] }); class NzDropdownMenuComponent { onAnimationEvent(event) { this.animationStateChange$.emit(event); } setMouseState(visible) { this.mouseState$.next(visible); } setValue(key, value) { this[key] = value; this.cdr.markForCheck(); } constructor(cdr, elementRef, renderer, viewContainerRef, nzMenuService, directionality) { this.cdr = cdr; this.elementRef = elementRef; this.renderer = renderer; this.viewContainerRef = viewContainerRef; this.nzMenuService = nzMenuService; this.directionality = directionality; this.mouseState$ = new BehaviorSubject(false); this.isChildSubMenuOpen$ = this.nzMenuService.isChildSubMenuOpen$; this.descendantMenuItemClick$ = this.nzMenuService.descendantMenuItemClick$; this.animationStateChange$ = new EventEmitter(); this.nzOverlayClassName = ''; this.nzOverlayStyle = {}; this.dir = 'ltr'; this.destroy$ = new Subject(); this.noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); } ngOnInit() { this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => { this.dir = direction; this.cdr.detectChanges(); }); this.dir = this.directionality.value; } ngAfterContentInit() { this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), this.elementRef.nativeElement); } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$1.MenuService }, { token: i2$1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: NzDropdownMenuComponent, isStandalone: true, selector: "nz-dropdown-menu", providers: [ MenuService, /** menu is inside dropdown-menu component **/ { provide: NzIsMenuInsideDropDownToken, useValue: true } ], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["nzDropdownMenu"], ngImport: i0, template: ` <ng-template> <div class="ant-dropdown" [class.ant-dropdown-rtl]="dir === 'rtl'" [ngClass]="nzOverlayClassName" [ngStyle]="nzOverlayStyle" @slideMotion (@slideMotion.done)="onAnimationEvent($event)" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" (mouseenter)="setMouseState(true)" (mouseleave)="setMouseState(false)" > <ng-content></ng-content> </div> </ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NzNoAnimationDirective, selector: "[nzNoAnimation]", inputs: ["nzNoAnimation"], exportAs: ["nzNoAnimation"] }], animations: [slideMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropdownMenuComponent, decorators: [{ type: Component, args: [{ selector: `nz-dropdown-menu`, exportAs: `nzDropdownMenu`, animations: [slideMotion], providers: [ MenuService, /** menu is inside dropdown-menu component **/ { provide: NzIsMenuInsideDropDownToken, useValue: true } ], template: ` <ng-template> <div class="ant-dropdown" [class.ant-dropdown-rtl]="dir === 'rtl'" [ngClass]="nzOverlayClassName" [ngStyle]="nzOverlayStyle" @slideMotion (@slideMotion.done)="onAnimationEvent($event)" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" (mouseenter)="setMouseState(true)" (mouseleave)="setMouseState(false)" > <ng-content></ng-content> </div> </ng-template> `, preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle, NzNoAnimationDirective], standalone: true }] }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$1.MenuService }, { type: i2$1.Directionality }], propDecorators: { templateRef: [{ type: ViewChild, args: [TemplateRef, { static: true }] }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzDropDownModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownModule, imports: [NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective, NzContextMenuServiceModule], exports: [NzMenuModule, NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownModule, imports: [NzContextMenuServiceModule, NzMenuModule] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDropDownModule, decorators: [{ type: NgModule, args: [{ imports: [ NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective, NzContextMenuServiceModule ], exports: [NzMenuModule, NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective] }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ const LIST_OF_POSITIONS = [ new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }), new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }), new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }), new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }) ]; class NzContextMenuService { constructor(ngZone, overlay) { this.ngZone = ngZone; this.overlay = overlay; this.overlayRef = null; this.closeSubscription = Subscription.EMPTY; } create($event, nzDropdownMenuComponent) { this.close(true); const { x, y } = $event; if ($event instanceof MouseEvent) { $event.preventDefault(); } const positionStrategy = this.overlay .position() .flexibleConnectedTo({ x, y }) .withPositions(LIST_OF_POSITIONS) .withTransformOriginOn('.ant-dropdown'); this.overlayRef = this.overlay.create({ positionStrategy, disposeOnNavigation: true, scrollStrategy: this.overlay.scrollStrategies.close() }); this.closeSubscription = new Subscription(); this.closeSubscription.add(nzDropdownMenuComponent.descendantMenuItemClick$.subscribe(() => this.close())); this.closeSubscription.add(this.ngZone.runOutsideAngular(() => merge(fromEvent(document, 'click').pipe(filter(event => !!this.overlayRef && !this.overlayRef.overlayElement.contains(event.target)), /** handle firefox contextmenu event **/ filter(event => event.button !== 2)), fromEvent(document, 'keydown').pipe(filter(event => event.key === 'Escape'))) .pipe(first()) .subscribe(() => this.ngZone.run(() => this.close())))); return this.overlayRef.attach(new TemplatePortal(nzDropdownMenuComponent.templateRef, nzDropdownMenuComponent.viewContainerRef)); } close(clear = false) { if (this.overlayRef) { this.overlayRef.detach(); if (clear) { this.overlayRef.dispose(); } this.overlayRef = null; this.closeSubscription.unsubscribe(); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuService, deps: [{ token: i0.NgZone }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuService, providedIn: NzContextMenuServiceModule }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzContextMenuService, decorators: [{ type: Injectable, args: [{ providedIn: NzContextMenuServiceModule }] }], ctorParameters: () => [{ type: i0.NgZone }, { type: i2.Overlay }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * Generated bundle index. Do not edit. */ export { NzContextMenuService, NzContextMenuServiceModule, NzDropDownADirective, NzDropDownDirective, NzDropDownModule, NzDropdownButtonDirective, NzDropdownMenuComponent }; //# sourceMappingURL=ng-zorro-antd-dropdown.mjs.map