ng-zorro-antd-experimental-image.mjs 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. import { __esDecorate, __runInitializers } from 'tslib';
  2. import * as i0 from '@angular/core';
  3. import { booleanAttribute, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
  4. import { Subject } from 'rxjs';
  5. import { takeUntil } from 'rxjs/operators';
  6. import * as i1 from 'ng-zorro-antd/core/config';
  7. import { WithConfig } from 'ng-zorro-antd/core/config';
  8. import { warn } from 'ng-zorro-antd/core/logger';
  9. import { NzImageDirective } from 'ng-zorro-antd/image';
  10. import { isNil } from 'ng-zorro-antd/core/util';
  11. import * as i2 from 'ng-zorro-antd/core/services';
  12. /**
  13. * Use of this source code is governed by an MIT-style license that can be
  14. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  15. */
  16. function isFixedSize(size) {
  17. return typeof size === 'number' || /^(\d)+(px)?$/.test(size);
  18. }
  19. function normalizeSrc(src) {
  20. return src[0] === '/' ? src.slice(1) : src;
  21. }
  22. /**
  23. * Use of this source code is governed by an MIT-style license that can be
  24. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  25. */
  26. const defaultImageSrcLoader = ({ src }) => {
  27. return src;
  28. };
  29. /**
  30. * AliObjectsLoader return format
  31. * {domain}/{src}?x-oss-process=image/resize,w_{width}
  32. */
  33. function createAliObjectsLoader(domain) {
  34. return ({ src, width }) => {
  35. const params = isNil(width) ? '' : `?x-oss-process=image/resize,w_${width}`;
  36. return `${domain}/${normalizeSrc(src)}${params}`;
  37. };
  38. }
  39. /**
  40. * ImgixLoader return format
  41. * {domain}/{src}?format=auto&fit=max&w={width}
  42. */
  43. function createImgixLoader(domain) {
  44. return ({ src, width }) => {
  45. const params = isNil(width) ? '' : `&fit=max&w=${width}`;
  46. return `${domain}/${normalizeSrc(src)}?format=auto${params}`;
  47. };
  48. }
  49. /**
  50. * CloudinaryLoader return format
  51. * {domain}/c_limit,q_auto,w_{width}/{src}
  52. */
  53. function createCloudinaryLoader(domain) {
  54. return ({ src, width }) => {
  55. const params = isNil(width) ? '' : `,w_${width}`;
  56. return `${domain}/c_limit,q_auto${params}/${normalizeSrc(src)}`;
  57. };
  58. }
  59. const NZ_CONFIG_MODULE_NAME = 'imageExperimental';
  60. const sizeBreakpoints = [16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840];
  61. let NzImageViewComponent = (() => {
  62. let _nzSrcLoader_decorators;
  63. let _nzSrcLoader_initializers = [];
  64. let _nzSrcLoader_extraInitializers = [];
  65. let _nzAutoSrcset_decorators;
  66. let _nzAutoSrcset_initializers = [];
  67. let _nzAutoSrcset_extraInitializers = [];
  68. let _nzFallback_decorators;
  69. let _nzFallback_initializers = [];
  70. let _nzFallback_extraInitializers = [];
  71. let _nzPlaceholder_decorators;
  72. let _nzPlaceholder_initializers = [];
  73. let _nzPlaceholder_extraInitializers = [];
  74. let _nzDisablePreview_decorators;
  75. let _nzDisablePreview_initializers = [];
  76. let _nzDisablePreview_extraInitializers = [];
  77. return class NzImageViewComponent {
  78. static {
  79. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  80. _nzSrcLoader_decorators = [WithConfig()];
  81. _nzAutoSrcset_decorators = [WithConfig()];
  82. _nzFallback_decorators = [WithConfig()];
  83. _nzPlaceholder_decorators = [WithConfig()];
  84. _nzDisablePreview_decorators = [WithConfig()];
  85. __esDecorate(null, null, _nzSrcLoader_decorators, { kind: "field", name: "nzSrcLoader", static: false, private: false, access: { has: obj => "nzSrcLoader" in obj, get: obj => obj.nzSrcLoader, set: (obj, value) => { obj.nzSrcLoader = value; } }, metadata: _metadata }, _nzSrcLoader_initializers, _nzSrcLoader_extraInitializers);
  86. __esDecorate(null, null, _nzAutoSrcset_decorators, { kind: "field", name: "nzAutoSrcset", static: false, private: false, access: { has: obj => "nzAutoSrcset" in obj, get: obj => obj.nzAutoSrcset, set: (obj, value) => { obj.nzAutoSrcset = value; } }, metadata: _metadata }, _nzAutoSrcset_initializers, _nzAutoSrcset_extraInitializers);
  87. __esDecorate(null, null, _nzFallback_decorators, { kind: "field", name: "nzFallback", static: false, private: false, access: { has: obj => "nzFallback" in obj, get: obj => obj.nzFallback, set: (obj, value) => { obj.nzFallback = value; } }, metadata: _metadata }, _nzFallback_initializers, _nzFallback_extraInitializers);
  88. __esDecorate(null, null, _nzPlaceholder_decorators, { kind: "field", name: "nzPlaceholder", static: false, private: false, access: { has: obj => "nzPlaceholder" in obj, get: obj => obj.nzPlaceholder, set: (obj, value) => { obj.nzPlaceholder = value; } }, metadata: _metadata }, _nzPlaceholder_initializers, _nzPlaceholder_extraInitializers);
  89. __esDecorate(null, null, _nzDisablePreview_decorators, { kind: "field", name: "nzDisablePreview", static: false, private: false, access: { has: obj => "nzDisablePreview" in obj, get: obj => obj.nzDisablePreview, set: (obj, value) => { obj.nzDisablePreview = value; } }, metadata: _metadata }, _nzDisablePreview_initializers, _nzDisablePreview_extraInitializers);
  90. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  91. }
  92. cdr;
  93. nzConfigService;
  94. imagePreloadService;
  95. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  96. nzSrc = '';
  97. nzAlt = '';
  98. nzWidth = 'auto';
  99. nzHeight = 'auto';
  100. nzSrcLoader = __runInitializers(this, _nzSrcLoader_initializers, defaultImageSrcLoader);
  101. nzAutoSrcset = (__runInitializers(this, _nzSrcLoader_extraInitializers), __runInitializers(this, _nzAutoSrcset_initializers, false));
  102. nzPriority = (__runInitializers(this, _nzAutoSrcset_extraInitializers), false);
  103. nzFallback = __runInitializers(this, _nzFallback_initializers, null);
  104. nzPlaceholder = (__runInitializers(this, _nzFallback_extraInitializers), __runInitializers(this, _nzPlaceholder_initializers, null));
  105. nzDisablePreview = (__runInitializers(this, _nzPlaceholder_extraInitializers), __runInitializers(this, _nzDisablePreview_initializers, false));
  106. imageRef = __runInitializers(this, _nzDisablePreview_extraInitializers);
  107. src = '';
  108. width = 'auto';
  109. height = 'auto';
  110. srcset = '';
  111. internalImage;
  112. destroy$ = new Subject();
  113. reloadDisposeHandler = () => void 0;
  114. constructor(cdr, nzConfigService, imagePreloadService) {
  115. this.cdr = cdr;
  116. this.nzConfigService = nzConfigService;
  117. this.imagePreloadService = imagePreloadService;
  118. this.nzConfigService
  119. .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
  120. .pipe(takeUntil(this.destroy$))
  121. .subscribe(() => {
  122. this.composeImageAttrs();
  123. this.cdr.markForCheck();
  124. });
  125. }
  126. ngOnInit() {
  127. if (this.nzPriority) {
  128. this.preload();
  129. }
  130. }
  131. ngOnChanges(changes) {
  132. const { nzLoader, nzSrc, nzOptimize } = changes;
  133. if (nzSrc || nzLoader || nzOptimize) {
  134. this.composeImageAttrs();
  135. }
  136. }
  137. ngOnDestroy() {
  138. this.reloadDisposeHandler();
  139. this.destroy$.next();
  140. this.destroy$.complete();
  141. }
  142. preload() {
  143. this.reloadDisposeHandler = this.imagePreloadService.addPreload({
  144. src: this.src,
  145. srcset: this.srcset
  146. });
  147. }
  148. optimizable() {
  149. if (this.nzAutoSrcset) {
  150. if (!isFixedSize(this.nzWidth) || !isFixedSize(this.nzHeight)) {
  151. warn(`When using "nzAutoSrcset" you should use a fixed size width and height, for more information please refer to CLS (https://web.dev/cls/) performance metrics`);
  152. return false;
  153. }
  154. if (this.nzSrc.endsWith('.svg')) {
  155. warn(`SVG does not need to be optimized`);
  156. return false;
  157. }
  158. if (this.nzSrc.startsWith('data:')) {
  159. warn(`Data URLs cannot be optimized`);
  160. return false;
  161. }
  162. return true;
  163. }
  164. return false;
  165. }
  166. composeImageAttrs() {
  167. const loader = this.getLoader();
  168. if (!this.optimizable()) {
  169. this.src = loader({ src: this.nzSrc });
  170. this.width = this.nzWidth;
  171. this.height = this.nzHeight;
  172. return;
  173. }
  174. this.width = typeof this.nzWidth === 'number' ? this.nzWidth : parseInt(this.nzWidth, 10);
  175. this.height = typeof this.nzHeight === 'number' ? this.nzHeight : parseInt(this.nzHeight, 10);
  176. const widths = this.convertWidths(this.width, sizeBreakpoints);
  177. this.src = loader({ src: this.nzSrc, width: widths[0] });
  178. this.srcset = widths
  179. .map((w, i) => `${loader({
  180. src: this.nzSrc,
  181. width: w
  182. })} ${i + 1}x`)
  183. .join(', ');
  184. }
  185. getLoader() {
  186. return this.nzSrcLoader || defaultImageSrcLoader;
  187. }
  188. convertWidths(width, optimizeSizes) {
  189. const allSizes = [...optimizeSizes].sort((a, b) => a - b);
  190. return [
  191. ...new Set(
  192. // 2x scale is sufficient
  193. // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
  194. [width, width * 2].map(w => allSizes.find(p => p >= w) || w))
  195. ];
  196. }
  197. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzImageViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NzConfigService }, { token: i2.ImagePreloadService }], target: i0.ɵɵFactoryTarget.Component });
  198. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzImageViewComponent, isStandalone: true, selector: "nz-image", inputs: { nzSrc: "nzSrc", nzAlt: "nzAlt", nzWidth: "nzWidth", nzHeight: "nzHeight", nzSrcLoader: "nzSrcLoader", nzAutoSrcset: ["nzAutoSrcset", "nzAutoSrcset", booleanAttribute], nzPriority: ["nzPriority", "nzPriority", booleanAttribute], nzFallback: "nzFallback", nzPlaceholder: "nzPlaceholder", nzDisablePreview: ["nzDisablePreview", "nzDisablePreview", booleanAttribute] }, viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["imageRef"], descendants: true }], exportAs: ["nzImage"], usesOnChanges: true, ngImport: i0, template: `
  199. <img
  200. #imageRef
  201. nz-image
  202. [nzSrc]="src"
  203. [nzSrcset]="srcset"
  204. [nzDisablePreview]="nzDisablePreview"
  205. [nzFallback]="nzFallback"
  206. [nzPlaceholder]="nzPlaceholder"
  207. [attr.width]="width"
  208. [attr.height]="height"
  209. [attr.srcset]="srcset"
  210. [attr.alt]="nzAlt || null"
  211. />
  212. `, isInline: true, dependencies: [{ kind: "directive", type: NzImageDirective, selector: "img[nz-image]", inputs: ["nzSrc", "nzSrcset", "nzDisablePreview", "nzFallback", "nzPlaceholder", "nzScaleStep"], exportAs: ["nzImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  213. };
  214. })();
  215. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzImageViewComponent, decorators: [{
  216. type: Component,
  217. args: [{
  218. selector: 'nz-image',
  219. exportAs: 'nzImage',
  220. template: `
  221. <img
  222. #imageRef
  223. nz-image
  224. [nzSrc]="src"
  225. [nzSrcset]="srcset"
  226. [nzDisablePreview]="nzDisablePreview"
  227. [nzFallback]="nzFallback"
  228. [nzPlaceholder]="nzPlaceholder"
  229. [attr.width]="width"
  230. [attr.height]="height"
  231. [attr.srcset]="srcset"
  232. [attr.alt]="nzAlt || null"
  233. />
  234. `,
  235. preserveWhitespaces: false,
  236. changeDetection: ChangeDetectionStrategy.OnPush,
  237. encapsulation: ViewEncapsulation.None,
  238. imports: [NzImageDirective]
  239. }]
  240. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NzConfigService }, { type: i2.ImagePreloadService }], propDecorators: { nzSrc: [{
  241. type: Input
  242. }], nzAlt: [{
  243. type: Input
  244. }], nzWidth: [{
  245. type: Input
  246. }], nzHeight: [{
  247. type: Input
  248. }], nzSrcLoader: [{
  249. type: Input
  250. }], nzAutoSrcset: [{
  251. type: Input,
  252. args: [{ transform: booleanAttribute }]
  253. }], nzPriority: [{
  254. type: Input,
  255. args: [{ transform: booleanAttribute }]
  256. }], nzFallback: [{
  257. type: Input
  258. }], nzPlaceholder: [{
  259. type: Input
  260. }], nzDisablePreview: [{
  261. type: Input,
  262. args: [{ transform: booleanAttribute }]
  263. }], imageRef: [{
  264. type: ViewChild,
  265. args: ['imageRef']
  266. }] } });
  267. /**
  268. * Use of this source code is governed by an MIT-style license that can be
  269. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  270. */
  271. class NzImageModule {
  272. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  273. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzImageModule, imports: [NzImageViewComponent], exports: [NzImageViewComponent] });
  274. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzImageModule });
  275. }
  276. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzImageModule, decorators: [{
  277. type: NgModule,
  278. args: [{
  279. imports: [NzImageViewComponent],
  280. exports: [NzImageViewComponent]
  281. }]
  282. }] });
  283. /**
  284. * Use of this source code is governed by an MIT-style license that can be
  285. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  286. */
  287. /**
  288. * Use of this source code is governed by an MIT-style license that can be
  289. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  290. */
  291. /**
  292. * Generated bundle index. Do not edit.
  293. */
  294. export { NZ_CONFIG_MODULE_NAME, NzImageModule, NzImageViewComponent, createAliObjectsLoader, createCloudinaryLoader, createImgixLoader, defaultImageSrcLoader, isFixedSize, normalizeSrc };
  295. //# sourceMappingURL=ng-zorro-antd-experimental-image.mjs.map