UNPKG

ng-zorro-antd

Version:

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

491 lines (485 loc) 25.1 kB
import { __decorate } from 'tslib'; import * as i6 from '@angular/cdk/a11y'; import { A11yModule } from '@angular/cdk/a11y'; import * as i4 from '@angular/cdk/overlay'; import { OverlayModule } from '@angular/cdk/overlay'; import { DOCUMENT, NgClass, NgStyle } from '@angular/common'; import * as i0 from '@angular/core'; import { EventEmitter, Directive, Host, Optional, Input, Output, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, ViewChildren, NgModule } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, first, finalize } from 'rxjs/operators'; import * as i9 from 'ng-zorro-antd/button'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { zoomBigMotion } from 'ng-zorro-antd/core/animation'; import * as i2 from 'ng-zorro-antd/core/config'; import { WithConfig } from 'ng-zorro-antd/core/config'; import * as i1 from 'ng-zorro-antd/core/no-animation'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import * as i7 from 'ng-zorro-antd/core/outlet'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import * as i5 from 'ng-zorro-antd/core/overlay'; import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { InputBoolean, wrapIntoObservable } from 'ng-zorro-antd/core/util'; import * as i12 from 'ng-zorro-antd/i18n'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import * as i8 from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzTooltipBaseDirective, NzToolTipComponent } from 'ng-zorro-antd/tooltip'; import * as i3 from '@angular/cdk/bidi'; import * as i10 from 'ng-zorro-antd/core/transition-patch'; import * as i11 from 'ng-zorro-antd/core/wave'; const NZ_CONFIG_MODULE_NAME = 'popconfirm'; class NzPopconfirmDirective extends NzTooltipBaseDirective { getProxyPropertyMap() { return { nzOkText: ['nzOkText', () => this.nzOkText], nzOkType: ['nzOkType', () => this.nzOkType], nzOkDanger: ['nzOkDanger', () => this.nzOkDanger], nzCancelText: ['nzCancelText', () => this.nzCancelText], nzBeforeConfirm: ['nzBeforeConfirm', () => this.nzBeforeConfirm], nzCondition: ['nzCondition', () => this.nzCondition], nzIcon: ['nzIcon', () => this.nzIcon], nzPopconfirmShowArrow: ['nzPopconfirmShowArrow', () => this.nzPopconfirmShowArrow], nzPopconfirmBackdrop: ['nzBackdrop', () => this.nzPopconfirmBackdrop], nzAutoFocus: ['nzAutoFocus', () => this.nzAutofocus], ...super.getProxyPropertyMap() }; } constructor(elementRef, hostView, renderer, noAnimation, nzConfigService) { super(elementRef, hostView, renderer, noAnimation, nzConfigService); this._nzModuleName = NZ_CONFIG_MODULE_NAME; this.trigger = 'click'; this.placement = 'top'; this.nzCondition = false; this.nzPopconfirmShowArrow = true; this.nzPopconfirmBackdrop = false; this.nzAutofocus = null; // eslint-disable-next-line @angular-eslint/no-output-rename this.visibleChange = new EventEmitter(); this.nzOnCancel = new EventEmitter(); this.nzOnConfirm = new EventEmitter(); this.componentRef = this.hostView.createComponent(NzPopconfirmComponent); } /** * @override */ createComponent() { super.createComponent(); this.component.nzOnCancel.pipe(takeUntil(this.destroy$)).subscribe(() => { this.nzOnCancel.emit(); }); this.component.nzOnConfirm.pipe(takeUntil(this.destroy$)).subscribe(() => { this.nzOnConfirm.emit(); }); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1.NzNoAnimationDirective, host: true, optional: true }, { token: i2.NzConfigService }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: NzPopconfirmDirective, isStandalone: true, selector: "[nz-popconfirm]", inputs: { arrowPointAtCenter: ["nzPopconfirmArrowPointAtCenter", "arrowPointAtCenter"], title: ["nzPopconfirmTitle", "title"], directiveTitle: ["nz-popconfirm", "directiveTitle"], trigger: ["nzPopconfirmTrigger", "trigger"], placement: ["nzPopconfirmPlacement", "placement"], origin: ["nzPopconfirmOrigin", "origin"], mouseEnterDelay: ["nzPopconfirmMouseEnterDelay", "mouseEnterDelay"], mouseLeaveDelay: ["nzPopconfirmMouseLeaveDelay", "mouseLeaveDelay"], overlayClassName: ["nzPopconfirmOverlayClassName", "overlayClassName"], overlayStyle: ["nzPopconfirmOverlayStyle", "overlayStyle"], visible: ["nzPopconfirmVisible", "visible"], nzOkText: "nzOkText", nzOkType: "nzOkType", nzOkDanger: "nzOkDanger", nzCancelText: "nzCancelText", nzBeforeConfirm: "nzBeforeConfirm", nzIcon: "nzIcon", nzCondition: "nzCondition", nzPopconfirmShowArrow: "nzPopconfirmShowArrow", nzPopconfirmBackdrop: "nzPopconfirmBackdrop", nzAutofocus: "nzAutofocus" }, outputs: { visibleChange: "nzPopconfirmVisibleChange", nzOnCancel: "nzOnCancel", nzOnConfirm: "nzOnConfirm" }, host: { properties: { "class.ant-popover-open": "visible" } }, exportAs: ["nzPopconfirm"], usesInheritance: true, ngImport: i0 }); } } __decorate([ InputBoolean() ], NzPopconfirmDirective.prototype, "arrowPointAtCenter", void 0); __decorate([ InputBoolean() ], NzPopconfirmDirective.prototype, "nzOkDanger", void 0); __decorate([ InputBoolean() ], NzPopconfirmDirective.prototype, "nzCondition", void 0); __decorate([ InputBoolean() ], NzPopconfirmDirective.prototype, "nzPopconfirmShowArrow", void 0); __decorate([ WithConfig() ], NzPopconfirmDirective.prototype, "nzPopconfirmBackdrop", void 0); __decorate([ WithConfig() ], NzPopconfirmDirective.prototype, "nzAutofocus", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmDirective, decorators: [{ type: Directive, args: [{ selector: '[nz-popconfirm]', exportAs: 'nzPopconfirm', host: { '[class.ant-popover-open]': 'visible' }, standalone: true }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1.NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] }, { type: i2.NzConfigService }], propDecorators: { arrowPointAtCenter: [{ type: Input, args: ['nzPopconfirmArrowPointAtCenter'] }], title: [{ type: Input, args: ['nzPopconfirmTitle'] }], directiveTitle: [{ type: Input, args: ['nz-popconfirm'] }], trigger: [{ type: Input, args: ['nzPopconfirmTrigger'] }], placement: [{ type: Input, args: ['nzPopconfirmPlacement'] }], origin: [{ type: Input, args: ['nzPopconfirmOrigin'] }], mouseEnterDelay: [{ type: Input, args: ['nzPopconfirmMouseEnterDelay'] }], mouseLeaveDelay: [{ type: Input, args: ['nzPopconfirmMouseLeaveDelay'] }], overlayClassName: [{ type: Input, args: ['nzPopconfirmOverlayClassName'] }], overlayStyle: [{ type: Input, args: ['nzPopconfirmOverlayStyle'] }], visible: [{ type: Input, args: ['nzPopconfirmVisible'] }], nzOkText: [{ type: Input }], nzOkType: [{ type: Input }], nzOkDanger: [{ type: Input }], nzCancelText: [{ type: Input }], nzBeforeConfirm: [{ type: Input }], nzIcon: [{ type: Input }], nzCondition: [{ type: Input }], nzPopconfirmShowArrow: [{ type: Input }], nzPopconfirmBackdrop: [{ type: Input }], nzAutofocus: [{ type: Input }], visibleChange: [{ type: Output, args: ['nzPopconfirmVisibleChange'] }], nzOnCancel: [{ type: Output }], nzOnConfirm: [{ type: Output }] } }); class NzPopconfirmComponent extends NzToolTipComponent { constructor(cdr, elementRef, directionality, document, noAnimation) { super(cdr, directionality, noAnimation); this.elementRef = elementRef; this.nzCondition = false; this.nzPopconfirmShowArrow = true; this.nzOkType = 'primary'; this.nzOkDanger = false; this.nzAutoFocus = null; this.nzBeforeConfirm = null; this.nzOnCancel = new Subject(); this.nzOnConfirm = new Subject(); this._trigger = 'click'; this.elementFocusedBeforeModalWasOpened = null; this._prefix = 'ant-popover'; this.confirmLoading = false; this.document = document; } ngOnDestroy() { super.ngOnDestroy(); this.nzOnCancel.complete(); this.nzOnConfirm.complete(); } /** * @override */ show() { if (!this.nzCondition) { this.capturePreviouslyFocusedElement(); super.show(); } else { this.onConfirm(); } } hide() { super.hide(); this.restoreFocus(); } handleConfirm() { this.nzOnConfirm.next(); super.hide(); } onCancel() { this.nzOnCancel.next(); super.hide(); } onConfirm() { if (this.nzBeforeConfirm) { const observable = wrapIntoObservable(this.nzBeforeConfirm()).pipe(first()); this.confirmLoading = true; observable .pipe(finalize(() => { this.confirmLoading = false; this.cdr.markForCheck(); }), takeUntil(this.nzVisibleChange), takeUntil(this.destroy$)) .subscribe(value => { if (value) { this.handleConfirm(); } }); } else { this.handleConfirm(); } } capturePreviouslyFocusedElement() { if (this.document) { this.elementFocusedBeforeModalWasOpened = this.document.activeElement; } } restoreFocus() { const toFocus = this.elementFocusedBeforeModalWasOpened; // We need the extra check, because IE can set the `activeElement` to null in some cases. if (toFocus && typeof toFocus.focus === 'function') { const activeElement = this.document.activeElement; const element = this.elementRef.nativeElement; if (!activeElement || activeElement === this.document.body || activeElement === element || element.contains(activeElement)) { toFocus.focus(); } } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.Directionality, optional: true }, { token: DOCUMENT, optional: true }, { token: i1.NzNoAnimationDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: NzPopconfirmComponent, isStandalone: true, selector: "nz-popconfirm", viewQueries: [{ propertyName: "okBtn", predicate: ["okBtn"], descendants: true, read: ElementRef }, { propertyName: "cancelBtn", predicate: ["cancelBtn"], descendants: true, read: ElementRef }], exportAs: ["nzPopconfirmComponent"], usesInheritance: true, ngImport: i0, template: ` <ng-template #overlay="cdkConnectedOverlay" cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayOrigin]="origin" (overlayOutsideClick)="onClickOutside($event)" (detach)="hide()" (positionChange)="onPositionChange($event)" [cdkConnectedOverlayPositions]="_positions" [cdkConnectedOverlayOpen]="_visible" [cdkConnectedOverlayPush]="cdkConnectedOverlayPush" [nzArrowPointAtCenter]="nzArrowPointAtCenter" > <div cdkTrapFocus [cdkTrapFocusAutoCapture]="nzAutoFocus !== null" class="ant-popover" [ngClass]="_classMap" [class.ant-popover-rtl]="dir === 'rtl'" [ngStyle]="nzOverlayStyle" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [@zoomBigMotion]="'active'" > <div class="ant-popover-content"> @if (nzPopconfirmShowArrow) { <div class="ant-popover-arrow"> <span class="ant-popover-arrow-content"></span> </div> } <div class="ant-popover-inner"> <div> <div class="ant-popover-inner-content"> <div class="ant-popover-message"> <ng-container *nzStringTemplateOutlet="nzTitle"> <ng-container *nzStringTemplateOutlet="nzIcon; let icon"> <span nz-icon [nzType]="icon || 'exclamation-circle'" nzTheme="fill"></span> </ng-container> <div class="ant-popover-message-title">{{ nzTitle }}</div> </ng-container> </div> <div class="ant-popover-buttons"> <button nz-button #cancelBtn [nzSize]="'small'" (click)="onCancel()" [attr.cdkFocusInitial]="nzAutoFocus === 'cancel' || null" > @if (nzCancelText) { {{ nzCancelText }} } @else { {{ 'Modal.cancelText' | nzI18n }} } </button> <button nz-button #okBtn [nzSize]="'small'" [nzType]="nzOkType !== 'danger' ? nzOkType : 'primary'" [nzDanger]="nzOkDanger || nzOkType === 'danger'" [nzLoading]="confirmLoading" (click)="onConfirm()" [attr.cdkFocusInitial]="nzAutoFocus === 'ok' || null" > @if (nzOkText) { {{ nzOkText }} } @else { {{ 'Modal.okText' | nzI18n }} } </button> </div> </div> </div> </div> </div> </div> </ng-template> `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: NzOverlayModule }, { kind: "directive", type: i5.NzConnectedOverlayDirective, selector: "[cdkConnectedOverlay][nzConnectedOverlay]", inputs: ["nzArrowPointAtCenter"], exportAs: ["nzConnectedOverlay"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i7.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i8.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i9.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i10.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i11.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzI18nModule }, { kind: "pipe", type: i12.NzI18nPipe, name: "nzI18n" }], animations: [zoomBigMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmComponent, decorators: [{ type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-popconfirm', exportAs: 'nzPopconfirmComponent', preserveWhitespaces: false, animations: [zoomBigMotion], template: ` <ng-template #overlay="cdkConnectedOverlay" cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayOrigin]="origin" (overlayOutsideClick)="onClickOutside($event)" (detach)="hide()" (positionChange)="onPositionChange($event)" [cdkConnectedOverlayPositions]="_positions" [cdkConnectedOverlayOpen]="_visible" [cdkConnectedOverlayPush]="cdkConnectedOverlayPush" [nzArrowPointAtCenter]="nzArrowPointAtCenter" > <div cdkTrapFocus [cdkTrapFocusAutoCapture]="nzAutoFocus !== null" class="ant-popover" [ngClass]="_classMap" [class.ant-popover-rtl]="dir === 'rtl'" [ngStyle]="nzOverlayStyle" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [@zoomBigMotion]="'active'" > <div class="ant-popover-content"> @if (nzPopconfirmShowArrow) { <div class="ant-popover-arrow"> <span class="ant-popover-arrow-content"></span> </div> } <div class="ant-popover-inner"> <div> <div class="ant-popover-inner-content"> <div class="ant-popover-message"> <ng-container *nzStringTemplateOutlet="nzTitle"> <ng-container *nzStringTemplateOutlet="nzIcon; let icon"> <span nz-icon [nzType]="icon || 'exclamation-circle'" nzTheme="fill"></span> </ng-container> <div class="ant-popover-message-title">{{ nzTitle }}</div> </ng-container> </div> <div class="ant-popover-buttons"> <button nz-button #cancelBtn [nzSize]="'small'" (click)="onCancel()" [attr.cdkFocusInitial]="nzAutoFocus === 'cancel' || null" > @if (nzCancelText) { {{ nzCancelText }} } @else { {{ 'Modal.cancelText' | nzI18n }} } </button> <button nz-button #okBtn [nzSize]="'small'" [nzType]="nzOkType !== 'danger' ? nzOkType : 'primary'" [nzDanger]="nzOkDanger || nzOkType === 'danger'" [nzLoading]="confirmLoading" (click)="onConfirm()" [attr.cdkFocusInitial]="nzAutoFocus === 'ok' || null" > @if (nzOkText) { {{ nzOkText }} } @else { {{ 'Modal.okText' | nzI18n }} } </button> </div> </div> </div> </div> </div> </div> </ng-template> `, imports: [ OverlayModule, NzOverlayModule, A11yModule, NgClass, NgStyle, NzNoAnimationDirective, NzOutletModule, NzIconModule, NzButtonModule, NzI18nModule ], standalone: true }] }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.Directionality, decorators: [{ type: Optional }] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT] }] }, { type: i1.NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] }], propDecorators: { okBtn: [{ type: ViewChildren, args: ['okBtn', { read: ElementRef }] }], cancelBtn: [{ type: ViewChildren, args: ['cancelBtn', { read: ElementRef }] }] } }); /** * 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 NzPopconfirmModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmModule, imports: [NzPopconfirmComponent, NzPopconfirmDirective], exports: [NzPopconfirmComponent, NzPopconfirmDirective] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmModule, imports: [NzPopconfirmComponent] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzPopconfirmModule, decorators: [{ type: NgModule, args: [{ imports: [NzPopconfirmComponent, NzPopconfirmDirective], exports: [NzPopconfirmComponent, NzPopconfirmDirective] }] }] }); /** * 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 { NzPopconfirmComponent, NzPopconfirmDirective, NzPopconfirmModule }; //# sourceMappingURL=ng-zorro-antd-popconfirm.mjs.map