ng-zorro-antd-alert.mjs 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. import { __esDecorate, __runInitializers } from 'tslib';
  2. import * as i0 from '@angular/core';
  3. import { EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
  4. import { Subject } from 'rxjs';
  5. import { takeUntil } from 'rxjs/operators';
  6. import { slideAlertMotion } from 'ng-zorro-antd/core/animation';
  7. import * as i1 from 'ng-zorro-antd/core/config';
  8. import { WithConfig } from 'ng-zorro-antd/core/config';
  9. import * as i4 from 'ng-zorro-antd/core/outlet';
  10. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  11. import * as i3 from 'ng-zorro-antd/icon';
  12. import { NzIconModule } from 'ng-zorro-antd/icon';
  13. import * as i2 from '@angular/cdk/bidi';
  14. const NZ_CONFIG_MODULE_NAME = 'alert';
  15. let NzAlertComponent = (() => {
  16. let _nzCloseable_decorators;
  17. let _nzCloseable_initializers = [];
  18. let _nzCloseable_extraInitializers = [];
  19. let _nzShowIcon_decorators;
  20. let _nzShowIcon_initializers = [];
  21. let _nzShowIcon_extraInitializers = [];
  22. return class NzAlertComponent {
  23. static {
  24. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  25. _nzCloseable_decorators = [WithConfig()];
  26. _nzShowIcon_decorators = [WithConfig()];
  27. __esDecorate(null, null, _nzCloseable_decorators, { kind: "field", name: "nzCloseable", static: false, private: false, access: { has: obj => "nzCloseable" in obj, get: obj => obj.nzCloseable, set: (obj, value) => { obj.nzCloseable = value; } }, metadata: _metadata }, _nzCloseable_initializers, _nzCloseable_extraInitializers);
  28. __esDecorate(null, null, _nzShowIcon_decorators, { kind: "field", name: "nzShowIcon", static: false, private: false, access: { has: obj => "nzShowIcon" in obj, get: obj => obj.nzShowIcon, set: (obj, value) => { obj.nzShowIcon = value; } }, metadata: _metadata }, _nzShowIcon_initializers, _nzShowIcon_extraInitializers);
  29. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  30. }
  31. nzConfigService;
  32. cdr;
  33. directionality;
  34. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  35. nzAction = null;
  36. nzCloseText = null;
  37. nzIconType = null;
  38. nzMessage = null;
  39. nzDescription = null;
  40. nzType = 'info';
  41. nzCloseable = __runInitializers(this, _nzCloseable_initializers, false);
  42. nzShowIcon = (__runInitializers(this, _nzCloseable_extraInitializers), __runInitializers(this, _nzShowIcon_initializers, false));
  43. nzBanner = (__runInitializers(this, _nzShowIcon_extraInitializers), false);
  44. nzNoAnimation = false;
  45. nzIcon = null;
  46. nzOnClose = new EventEmitter();
  47. closed = false;
  48. iconTheme = 'fill';
  49. inferredIconType = 'info-circle';
  50. dir = 'ltr';
  51. isTypeSet = false;
  52. isShowIconSet = false;
  53. destroy$ = new Subject();
  54. constructor(nzConfigService, cdr, directionality) {
  55. this.nzConfigService = nzConfigService;
  56. this.cdr = cdr;
  57. this.directionality = directionality;
  58. this.nzConfigService
  59. .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
  60. .pipe(takeUntil(this.destroy$))
  61. .subscribe(() => {
  62. this.cdr.markForCheck();
  63. });
  64. }
  65. ngOnInit() {
  66. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  67. this.dir = direction;
  68. this.cdr.detectChanges();
  69. });
  70. this.dir = this.directionality.value;
  71. }
  72. closeAlert() {
  73. this.closed = true;
  74. }
  75. onFadeAnimationDone() {
  76. if (this.closed) {
  77. this.nzOnClose.emit(true);
  78. }
  79. }
  80. ngOnChanges(changes) {
  81. const { nzShowIcon, nzDescription, nzType, nzBanner } = changes;
  82. if (nzShowIcon) {
  83. this.isShowIconSet = true;
  84. }
  85. if (nzType) {
  86. this.isTypeSet = true;
  87. switch (this.nzType) {
  88. case 'error':
  89. this.inferredIconType = 'close-circle';
  90. break;
  91. case 'success':
  92. this.inferredIconType = 'check-circle';
  93. break;
  94. case 'info':
  95. this.inferredIconType = 'info-circle';
  96. break;
  97. case 'warning':
  98. this.inferredIconType = 'exclamation-circle';
  99. break;
  100. }
  101. }
  102. if (nzDescription) {
  103. this.iconTheme = this.nzDescription ? 'outline' : 'fill';
  104. }
  105. if (nzBanner) {
  106. if (!this.isTypeSet) {
  107. this.nzType = 'warning';
  108. }
  109. if (!this.isShowIconSet) {
  110. this.nzShowIcon = true;
  111. }
  112. }
  113. }
  114. ngOnDestroy() {
  115. this.destroy$.next(true);
  116. this.destroy$.complete();
  117. }
  118. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAlertComponent, deps: [{ token: i1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  119. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzAlertComponent, isStandalone: true, selector: "nz-alert", inputs: { nzAction: "nzAction", nzCloseText: "nzCloseText", nzIconType: "nzIconType", nzMessage: "nzMessage", nzDescription: "nzDescription", nzType: "nzType", nzCloseable: ["nzCloseable", "nzCloseable", booleanAttribute], nzShowIcon: ["nzShowIcon", "nzShowIcon", booleanAttribute], nzBanner: ["nzBanner", "nzBanner", booleanAttribute], nzNoAnimation: ["nzNoAnimation", "nzNoAnimation", booleanAttribute], nzIcon: "nzIcon" }, outputs: { nzOnClose: "nzOnClose" }, exportAs: ["nzAlert"], usesOnChanges: true, ngImport: i0, template: `
  120. @if (!closed) {
  121. <div
  122. class="ant-alert"
  123. [class.ant-alert-rtl]="dir === 'rtl'"
  124. [class.ant-alert-success]="nzType === 'success'"
  125. [class.ant-alert-info]="nzType === 'info'"
  126. [class.ant-alert-warning]="nzType === 'warning'"
  127. [class.ant-alert-error]="nzType === 'error'"
  128. [class.ant-alert-no-icon]="!nzShowIcon"
  129. [class.ant-alert-banner]="nzBanner"
  130. [class.ant-alert-closable]="nzCloseable"
  131. [class.ant-alert-with-description]="!!nzDescription"
  132. [@.disabled]="nzNoAnimation"
  133. [@slideAlertMotion]
  134. (@slideAlertMotion.done)="onFadeAnimationDone()"
  135. >
  136. @if (nzShowIcon) {
  137. <div class="ant-alert-icon">
  138. @if (nzIcon) {
  139. <ng-container *nzStringTemplateOutlet="nzIcon"></ng-container>
  140. } @else {
  141. <nz-icon [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme" />
  142. }
  143. </div>
  144. }
  145. @if (nzMessage || nzDescription) {
  146. <div class="ant-alert-content">
  147. @if (nzMessage) {
  148. <span class="ant-alert-message">
  149. <ng-container *nzStringTemplateOutlet="nzMessage">{{ nzMessage }}</ng-container>
  150. </span>
  151. }
  152. @if (nzDescription) {
  153. <span class="ant-alert-description">
  154. <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
  155. </span>
  156. }
  157. </div>
  158. }
  159. @if (nzAction) {
  160. <div class="ant-alert-action">
  161. <ng-container *nzStringTemplateOutlet="nzAction">{{ nzAction }}</ng-container>
  162. </div>
  163. }
  164. @if (nzCloseable || nzCloseText) {
  165. <button type="button" tabindex="0" class="ant-alert-close-icon" (click)="closeAlert()">
  166. @if (nzCloseText) {
  167. <ng-container *nzStringTemplateOutlet="nzCloseText">
  168. <span class="ant-alert-close-text">{{ nzCloseText }}</span>
  169. </ng-container>
  170. } @else {
  171. <nz-icon nzType="close" />
  172. }
  173. </button>
  174. }
  175. </div>
  176. }
  177. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i4.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], animations: [slideAlertMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  178. };
  179. })();
  180. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAlertComponent, decorators: [{
  181. type: Component,
  182. args: [{
  183. selector: 'nz-alert',
  184. exportAs: 'nzAlert',
  185. animations: [slideAlertMotion],
  186. imports: [NzIconModule, NzOutletModule],
  187. template: `
  188. @if (!closed) {
  189. <div
  190. class="ant-alert"
  191. [class.ant-alert-rtl]="dir === 'rtl'"
  192. [class.ant-alert-success]="nzType === 'success'"
  193. [class.ant-alert-info]="nzType === 'info'"
  194. [class.ant-alert-warning]="nzType === 'warning'"
  195. [class.ant-alert-error]="nzType === 'error'"
  196. [class.ant-alert-no-icon]="!nzShowIcon"
  197. [class.ant-alert-banner]="nzBanner"
  198. [class.ant-alert-closable]="nzCloseable"
  199. [class.ant-alert-with-description]="!!nzDescription"
  200. [@.disabled]="nzNoAnimation"
  201. [@slideAlertMotion]
  202. (@slideAlertMotion.done)="onFadeAnimationDone()"
  203. >
  204. @if (nzShowIcon) {
  205. <div class="ant-alert-icon">
  206. @if (nzIcon) {
  207. <ng-container *nzStringTemplateOutlet="nzIcon"></ng-container>
  208. } @else {
  209. <nz-icon [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme" />
  210. }
  211. </div>
  212. }
  213. @if (nzMessage || nzDescription) {
  214. <div class="ant-alert-content">
  215. @if (nzMessage) {
  216. <span class="ant-alert-message">
  217. <ng-container *nzStringTemplateOutlet="nzMessage">{{ nzMessage }}</ng-container>
  218. </span>
  219. }
  220. @if (nzDescription) {
  221. <span class="ant-alert-description">
  222. <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
  223. </span>
  224. }
  225. </div>
  226. }
  227. @if (nzAction) {
  228. <div class="ant-alert-action">
  229. <ng-container *nzStringTemplateOutlet="nzAction">{{ nzAction }}</ng-container>
  230. </div>
  231. }
  232. @if (nzCloseable || nzCloseText) {
  233. <button type="button" tabindex="0" class="ant-alert-close-icon" (click)="closeAlert()">
  234. @if (nzCloseText) {
  235. <ng-container *nzStringTemplateOutlet="nzCloseText">
  236. <span class="ant-alert-close-text">{{ nzCloseText }}</span>
  237. </ng-container>
  238. } @else {
  239. <nz-icon nzType="close" />
  240. }
  241. </button>
  242. }
  243. </div>
  244. }
  245. `,
  246. changeDetection: ChangeDetectionStrategy.OnPush,
  247. encapsulation: ViewEncapsulation.None,
  248. preserveWhitespaces: false
  249. }]
  250. }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality }], propDecorators: { nzAction: [{
  251. type: Input
  252. }], nzCloseText: [{
  253. type: Input
  254. }], nzIconType: [{
  255. type: Input
  256. }], nzMessage: [{
  257. type: Input
  258. }], nzDescription: [{
  259. type: Input
  260. }], nzType: [{
  261. type: Input
  262. }], nzCloseable: [{
  263. type: Input,
  264. args: [{ transform: booleanAttribute }]
  265. }], nzShowIcon: [{
  266. type: Input,
  267. args: [{ transform: booleanAttribute }]
  268. }], nzBanner: [{
  269. type: Input,
  270. args: [{ transform: booleanAttribute }]
  271. }], nzNoAnimation: [{
  272. type: Input,
  273. args: [{ transform: booleanAttribute }]
  274. }], nzIcon: [{
  275. type: Input
  276. }], nzOnClose: [{
  277. type: Output
  278. }] } });
  279. /**
  280. * Use of this source code is governed by an MIT-style license that can be
  281. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  282. */
  283. class NzAlertModule {
  284. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  285. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzAlertModule, imports: [NzAlertComponent], exports: [NzAlertComponent] });
  286. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAlertModule, imports: [NzAlertComponent] });
  287. }
  288. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAlertModule, decorators: [{
  289. type: NgModule,
  290. args: [{
  291. exports: [NzAlertComponent],
  292. imports: [NzAlertComponent]
  293. }]
  294. }] });
  295. /**
  296. * Use of this source code is governed by an MIT-style license that can be
  297. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  298. */
  299. /**
  300. * Generated bundle index. Do not edit.
  301. */
  302. export { NzAlertComponent, NzAlertModule };
  303. //# sourceMappingURL=ng-zorro-antd-alert.mjs.map