ng-zorro-antd-icon.mjs 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, inject, Injectable, numberAttribute, booleanAttribute, Input, Directive, makeEnvironmentProviders, NgModule } from '@angular/core';
  3. import { Subject, from } from 'rxjs';
  4. import { takeUntil } from 'rxjs/operators';
  5. import { IconService, IconDirective } from '@ant-design/icons-angular';
  6. import { warn } from 'ng-zorro-antd/core/logger';
  7. import { DOCUMENT } from '@angular/common';
  8. import { HttpBackend } from '@angular/common/http';
  9. import { BarsOutline, CalendarOutline, CaretUpFill, CaretUpOutline, CaretDownFill, CaretDownOutline, CheckCircleFill, CheckCircleOutline, CheckOutline, ClockCircleOutline, CloseCircleOutline, CloseCircleFill, CloseOutline, CopyOutline, DeleteOutline, DoubleLeftOutline, DoubleRightOutline, DownOutline, EditOutline, EllipsisOutline, ExclamationCircleFill, ExclamationCircleOutline, EyeOutline, FileFill, FileOutline, FilterFill, InfoCircleFill, InfoCircleOutline, LeftOutline, LoadingOutline, PaperClipOutline, QuestionCircleOutline, RightOutline, RotateRightOutline, RotateLeftOutline, StarFill, SearchOutline, UploadOutline, VerticalAlignTopOutline, UpOutline, SwapOutline, SwapRightOutline, ZoomInOutline, ZoomOutOutline } from '@ant-design/icons-angular/icons';
  10. import * as i1 from '@angular/platform-browser';
  11. import * as i2 from 'ng-zorro-antd/core/config';
  12. import * as i3 from '@angular/cdk/platform';
  13. /**
  14. * Use of this source code is governed by an MIT-style license that can be
  15. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  16. */
  17. const NZ_ICONS_USED_BY_ZORRO = [
  18. BarsOutline,
  19. CalendarOutline,
  20. CaretUpFill,
  21. CaretUpOutline,
  22. CaretDownFill,
  23. CaretDownOutline,
  24. CheckCircleFill,
  25. CheckCircleOutline,
  26. CheckOutline,
  27. ClockCircleOutline,
  28. CloseCircleOutline,
  29. CloseCircleFill,
  30. CloseOutline,
  31. CopyOutline,
  32. DeleteOutline,
  33. DoubleLeftOutline,
  34. DoubleRightOutline,
  35. DownOutline,
  36. EditOutline,
  37. EllipsisOutline,
  38. ExclamationCircleFill,
  39. ExclamationCircleOutline,
  40. EyeOutline,
  41. FileFill,
  42. FileOutline,
  43. FilterFill,
  44. InfoCircleFill,
  45. InfoCircleOutline,
  46. LeftOutline,
  47. LoadingOutline,
  48. PaperClipOutline,
  49. QuestionCircleOutline,
  50. RightOutline,
  51. RotateRightOutline,
  52. RotateLeftOutline,
  53. StarFill,
  54. SearchOutline,
  55. StarFill,
  56. UploadOutline,
  57. VerticalAlignTopOutline,
  58. UpOutline,
  59. SwapOutline,
  60. SwapRightOutline,
  61. ZoomInOutline,
  62. ZoomOutOutline
  63. ];
  64. const NZ_ICONS = new InjectionToken('nz_icons');
  65. const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color');
  66. const DEFAULT_TWOTONE_COLOR = '#1890ff';
  67. /**
  68. * It should be a global singleton, otherwise registered icons could not be found.
  69. */
  70. class NzIconService extends IconService {
  71. nzConfigService;
  72. platform;
  73. configUpdated$ = new Subject();
  74. get _disableDynamicLoading() {
  75. return !this.platform.isBrowser;
  76. }
  77. iconfontCache = new Set();
  78. subscription = null;
  79. ngOnDestroy() {
  80. if (this.subscription) {
  81. this.subscription.unsubscribe();
  82. this.subscription = null;
  83. }
  84. }
  85. normalizeSvgElement(svg) {
  86. if (!svg.getAttribute('viewBox')) {
  87. this._renderer.setAttribute(svg, 'viewBox', '0 0 1024 1024');
  88. }
  89. if (!svg.getAttribute('width') || !svg.getAttribute('height')) {
  90. this._renderer.setAttribute(svg, 'width', '1em');
  91. this._renderer.setAttribute(svg, 'height', '1em');
  92. }
  93. if (!svg.getAttribute('fill')) {
  94. this._renderer.setAttribute(svg, 'fill', 'currentColor');
  95. }
  96. }
  97. fetchFromIconfont(opt) {
  98. const { scriptUrl } = opt;
  99. if (this._document && !this.iconfontCache.has(scriptUrl)) {
  100. const script = this._renderer.createElement('script');
  101. this._renderer.setAttribute(script, 'src', scriptUrl);
  102. this._renderer.setAttribute(script, 'data-namespace', scriptUrl.replace(/^(https?|http):/g, ''));
  103. this._renderer.appendChild(this._document.body, script);
  104. this.iconfontCache.add(scriptUrl);
  105. }
  106. }
  107. createIconfontIcon(type) {
  108. return this._createSVGElementFromString(`<svg><use xlink:href="${type}"></svg>`);
  109. }
  110. constructor(rendererFactory, sanitizer, nzConfigService, platform) {
  111. super(rendererFactory, inject(HttpBackend, { optional: true }), // TODO: fix the type
  112. inject(DOCUMENT), sanitizer, [...NZ_ICONS_USED_BY_ZORRO, ...(inject(NZ_ICONS, { optional: true }) || [])]);
  113. this.nzConfigService = nzConfigService;
  114. this.platform = platform;
  115. this.onConfigChange();
  116. this.configDefaultTwotoneColor();
  117. this.configDefaultTheme();
  118. }
  119. onConfigChange() {
  120. this.subscription = this.nzConfigService.getConfigChangeEventForComponent('icon').subscribe(() => {
  121. this.configDefaultTwotoneColor();
  122. this.configDefaultTheme();
  123. this.configUpdated$.next();
  124. });
  125. }
  126. configDefaultTheme() {
  127. const iconConfig = this.getConfig();
  128. this.defaultTheme = iconConfig.nzTheme || 'outline';
  129. }
  130. configDefaultTwotoneColor() {
  131. const iconConfig = this.getConfig();
  132. const defaultTwotoneColor = iconConfig.nzTwotoneColor || DEFAULT_TWOTONE_COLOR;
  133. let primaryColor = DEFAULT_TWOTONE_COLOR;
  134. if (defaultTwotoneColor) {
  135. if (defaultTwotoneColor.startsWith('#')) {
  136. primaryColor = defaultTwotoneColor;
  137. }
  138. else {
  139. warn('Twotone color must be a hex color!');
  140. }
  141. }
  142. this.twoToneColor = { primaryColor };
  143. }
  144. getConfig() {
  145. return this.nzConfigService.getConfigForComponent('icon') || {};
  146. }
  147. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconService, deps: [{ token: i0.RendererFactory2 }, { token: i1.DomSanitizer }, { token: i2.NzConfigService }, { token: i3.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
  148. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconService, providedIn: 'root' });
  149. }
  150. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconService, decorators: [{
  151. type: Injectable,
  152. args: [{
  153. providedIn: 'root'
  154. }]
  155. }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1.DomSanitizer }, { type: i2.NzConfigService }, { type: i3.Platform }] });
  156. const NZ_ICONS_PATCH = new InjectionToken('nz_icons_patch');
  157. class NzIconPatchService {
  158. rootIconService;
  159. patched = false;
  160. extraIcons = inject(NZ_ICONS_PATCH, { self: true });
  161. constructor(rootIconService) {
  162. this.rootIconService = rootIconService;
  163. }
  164. doPatch() {
  165. if (this.patched) {
  166. return;
  167. }
  168. this.extraIcons.forEach(iconDefinition => this.rootIconService.addIcon(iconDefinition));
  169. this.patched = true;
  170. }
  171. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconPatchService, deps: [{ token: NzIconService }], target: i0.ɵɵFactoryTarget.Injectable });
  172. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconPatchService });
  173. }
  174. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconPatchService, decorators: [{
  175. type: Injectable
  176. }], ctorParameters: () => [{ type: NzIconService }] });
  177. /**
  178. * Use of this source code is governed by an MIT-style license that can be
  179. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  180. */
  181. class NzIconDirective extends IconDirective {
  182. ngZone;
  183. changeDetectorRef;
  184. iconService;
  185. renderer;
  186. cacheClassName = null;
  187. set nzSpin(value) {
  188. this.spin = value;
  189. }
  190. nzRotate = 0;
  191. set nzType(value) {
  192. this.type = value;
  193. }
  194. set nzTheme(value) {
  195. this.theme = value;
  196. }
  197. set nzTwotoneColor(value) {
  198. this.twoToneColor = value;
  199. }
  200. set nzIconfont(value) {
  201. this.iconfont = value;
  202. }
  203. hostClass;
  204. el;
  205. iconfont;
  206. spin = false;
  207. destroy$ = new Subject();
  208. constructor(ngZone, changeDetectorRef, iconService, renderer) {
  209. super(iconService);
  210. this.ngZone = ngZone;
  211. this.changeDetectorRef = changeDetectorRef;
  212. this.iconService = iconService;
  213. this.renderer = renderer;
  214. const iconPatch = inject(NzIconPatchService, { optional: true });
  215. if (iconPatch) {
  216. iconPatch.doPatch();
  217. }
  218. this.el = this._elementRef.nativeElement;
  219. }
  220. ngOnChanges(changes) {
  221. const { nzType, nzTwotoneColor, nzSpin, nzTheme, nzRotate } = changes;
  222. if (nzType || nzTwotoneColor || nzSpin || nzTheme) {
  223. this.changeIcon2();
  224. }
  225. else if (nzRotate) {
  226. this.handleRotate(this.el.firstChild);
  227. }
  228. else {
  229. this._setSVGElement(this.iconService.createIconfontIcon(`#${this.iconfont}`));
  230. }
  231. }
  232. /**
  233. * If custom content is provided, try to normalize SVG elements.
  234. */
  235. ngAfterContentChecked() {
  236. if (!this.type) {
  237. const children = this.el.children;
  238. let length = children.length;
  239. if (!this.type && children.length) {
  240. while (length--) {
  241. const child = children[length];
  242. if (child.tagName.toLowerCase() === 'svg') {
  243. this.iconService.normalizeSvgElement(child);
  244. }
  245. }
  246. }
  247. }
  248. }
  249. ngOnDestroy() {
  250. this.destroy$.next();
  251. }
  252. /**
  253. * Replacement of `changeIcon` for more modifications.
  254. */
  255. changeIcon2() {
  256. this.setClassName();
  257. // The Angular zone is left deliberately before the SVG is set
  258. // since `_changeIcon` spawns asynchronous tasks as promise and
  259. // HTTP calls. This is used to reduce the number of change detections
  260. // while the icon is being loaded dynamically.
  261. this.ngZone.runOutsideAngular(() => {
  262. from(this._changeIcon())
  263. .pipe(takeUntil(this.destroy$))
  264. .subscribe({
  265. next: svgOrRemove => {
  266. // Get back into the Angular zone after completing all the tasks.
  267. // Since we manually run change detection locally, we have to re-enter
  268. // the zone because the change detection might also be run on other local
  269. // components, leading them to handle template functions outside of the Angular zone.
  270. this.ngZone.run(() => {
  271. // The _changeIcon method would call Renderer to remove the element of the old icon,
  272. // which would call `markElementAsRemoved` eventually,
  273. // so we should call `detectChanges` to tell Angular remove the DOM node.
  274. // #7186
  275. this.changeDetectorRef.detectChanges();
  276. if (svgOrRemove) {
  277. this.setSVGData(svgOrRemove);
  278. this.handleSpin(svgOrRemove);
  279. this.handleRotate(svgOrRemove);
  280. }
  281. });
  282. },
  283. error: warn
  284. });
  285. });
  286. }
  287. handleSpin(svg) {
  288. if (this.spin || this.type === 'loading') {
  289. this.renderer.addClass(svg, 'anticon-spin');
  290. }
  291. else {
  292. this.renderer.removeClass(svg, 'anticon-spin');
  293. }
  294. }
  295. handleRotate(svg) {
  296. if (this.nzRotate) {
  297. this.renderer.setAttribute(svg, 'style', `transform: rotate(${this.nzRotate}deg)`);
  298. }
  299. else {
  300. this.renderer.removeAttribute(svg, 'style');
  301. }
  302. }
  303. setClassName() {
  304. if (this.cacheClassName) {
  305. this.renderer.removeClass(this.el, this.cacheClassName);
  306. }
  307. this.cacheClassName = `anticon-${this.type}`;
  308. this.renderer.addClass(this.el, this.cacheClassName);
  309. }
  310. setSVGData(svg) {
  311. this.renderer.setAttribute(svg, 'data-icon', this.type);
  312. this.renderer.setAttribute(svg, 'aria-hidden', 'true');
  313. }
  314. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconDirective, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: NzIconService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
  315. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: NzIconDirective, isStandalone: true, selector: "nz-icon,[nz-icon]", inputs: { nzSpin: ["nzSpin", "nzSpin", booleanAttribute], nzRotate: ["nzRotate", "nzRotate", numberAttribute], nzType: "nzType", nzTheme: "nzTheme", nzTwotoneColor: "nzTwotoneColor", nzIconfont: "nzIconfont" }, host: { classAttribute: "anticon" }, exportAs: ["nzIcon"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
  316. }
  317. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconDirective, decorators: [{
  318. type: Directive,
  319. args: [{
  320. selector: 'nz-icon,[nz-icon]',
  321. exportAs: 'nzIcon',
  322. host: {
  323. class: 'anticon'
  324. }
  325. }]
  326. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: NzIconService }, { type: i0.Renderer2 }], propDecorators: { nzSpin: [{
  327. type: Input,
  328. args: [{ transform: booleanAttribute }]
  329. }], nzRotate: [{
  330. type: Input,
  331. args: [{ transform: numberAttribute }]
  332. }], nzType: [{
  333. type: Input
  334. }], nzTheme: [{
  335. type: Input
  336. }], nzTwotoneColor: [{
  337. type: Input
  338. }], nzIconfont: [{
  339. type: Input
  340. }] } });
  341. /**
  342. * Use of this source code is governed by an MIT-style license that can be
  343. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  344. */
  345. /**
  346. * Provide icon definitions for NzIcon in root
  347. *
  348. * @param icons Icon definitions
  349. */
  350. const provideNzIcons = (icons) => {
  351. return makeEnvironmentProviders([
  352. {
  353. provide: NZ_ICONS,
  354. useValue: icons
  355. }
  356. ]);
  357. };
  358. /**
  359. * Provide icon definitions for NzIcon in feature module or standalone component
  360. *
  361. * @param icons Icon definitions
  362. */
  363. const provideNzIconsPatch = (icons) => {
  364. return [
  365. NzIconPatchService,
  366. {
  367. provide: NZ_ICONS_PATCH,
  368. useValue: icons
  369. }
  370. ];
  371. };
  372. /**
  373. * Use of this source code is governed by an MIT-style license that can be
  374. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  375. */
  376. class NzIconModule {
  377. static forRoot(icons) {
  378. return {
  379. ngModule: NzIconModule,
  380. providers: [provideNzIcons(icons)]
  381. };
  382. }
  383. static forChild(icons) {
  384. return {
  385. ngModule: NzIconModule,
  386. providers: [provideNzIconsPatch(icons)]
  387. };
  388. }
  389. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  390. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzIconModule, imports: [NzIconDirective], exports: [NzIconDirective] });
  391. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconModule });
  392. }
  393. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzIconModule, decorators: [{
  394. type: NgModule,
  395. args: [{
  396. imports: [NzIconDirective],
  397. exports: [NzIconDirective]
  398. }]
  399. }] });
  400. /**
  401. * Use of this source code is governed by an MIT-style license that can be
  402. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  403. */
  404. /**
  405. * Generated bundle index. Do not edit.
  406. */
  407. export { DEFAULT_TWOTONE_COLOR, NZ_ICONS, NZ_ICONS_PATCH, NZ_ICONS_USED_BY_ZORRO, NZ_ICON_DEFAULT_TWOTONE_COLOR, NzIconDirective, NzIconModule, NzIconPatchService, NzIconService, provideNzIcons, provideNzIconsPatch };
  408. //# sourceMappingURL=ng-zorro-antd-icon.mjs.map