290 lines
14 KiB
JavaScript
290 lines
14 KiB
JavaScript
import { __esDecorate, __runInitializers } from 'tslib';
|
|
import * as i0 from '@angular/core';
|
|
import { inject, ChangeDetectorRef, DestroyRef, booleanAttribute, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
import { WithConfig, onConfigChangeEventForComponent } from 'ng-zorro-antd/core/config';
|
|
import { warn } from 'ng-zorro-antd/core/logger';
|
|
import { ImagePreloadService } from 'ng-zorro-antd/core/services';
|
|
import { NzImageDirective } from 'ng-zorro-antd/image';
|
|
import { isNil } from 'ng-zorro-antd/core/util';
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
function isFixedSize(size) {
|
|
return typeof size === 'number' || /^(\d)+(px)?$/.test(size);
|
|
}
|
|
function normalizeSrc(src) {
|
|
return src[0] === '/' ? src.slice(1) : src;
|
|
}
|
|
|
|
/**
|
|
* 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 defaultImageSrcLoader = ({ src }) => {
|
|
return src;
|
|
};
|
|
/**
|
|
* AliObjectsLoader return format
|
|
* {domain}/{src}?x-oss-process=image/resize,w_{width}
|
|
*/
|
|
function createAliObjectsLoader(domain) {
|
|
return ({ src, width }) => {
|
|
const params = isNil(width) ? '' : `?x-oss-process=image/resize,w_${width}`;
|
|
return `${domain}/${normalizeSrc(src)}${params}`;
|
|
};
|
|
}
|
|
/**
|
|
* ImgixLoader return format
|
|
* {domain}/{src}?format=auto&fit=max&w={width}
|
|
*/
|
|
function createImgixLoader(domain) {
|
|
return ({ src, width }) => {
|
|
const params = isNil(width) ? '' : `&fit=max&w=${width}`;
|
|
return `${domain}/${normalizeSrc(src)}?format=auto${params}`;
|
|
};
|
|
}
|
|
/**
|
|
* CloudinaryLoader return format
|
|
* {domain}/c_limit,q_auto,w_{width}/{src}
|
|
*/
|
|
function createCloudinaryLoader(domain) {
|
|
return ({ src, width }) => {
|
|
const params = isNil(width) ? '' : `,w_${width}`;
|
|
return `${domain}/c_limit,q_auto${params}/${normalizeSrc(src)}`;
|
|
};
|
|
}
|
|
|
|
const NZ_CONFIG_MODULE_NAME = 'imageExperimental';
|
|
const sizeBreakpoints = [16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840];
|
|
let NzImageViewComponent = (() => {
|
|
let _nzSrcLoader_decorators;
|
|
let _nzSrcLoader_initializers = [];
|
|
let _nzSrcLoader_extraInitializers = [];
|
|
let _nzAutoSrcset_decorators;
|
|
let _nzAutoSrcset_initializers = [];
|
|
let _nzAutoSrcset_extraInitializers = [];
|
|
let _nzFallback_decorators;
|
|
let _nzFallback_initializers = [];
|
|
let _nzFallback_extraInitializers = [];
|
|
let _nzPlaceholder_decorators;
|
|
let _nzPlaceholder_initializers = [];
|
|
let _nzPlaceholder_extraInitializers = [];
|
|
let _nzDisablePreview_decorators;
|
|
let _nzDisablePreview_initializers = [];
|
|
let _nzDisablePreview_extraInitializers = [];
|
|
return class NzImageViewComponent {
|
|
static {
|
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
|
|
_nzSrcLoader_decorators = [WithConfig()];
|
|
_nzAutoSrcset_decorators = [WithConfig()];
|
|
_nzFallback_decorators = [WithConfig()];
|
|
_nzPlaceholder_decorators = [WithConfig()];
|
|
_nzDisablePreview_decorators = [WithConfig()];
|
|
__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);
|
|
__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);
|
|
__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);
|
|
__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);
|
|
__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);
|
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
}
|
|
cdr = inject(ChangeDetectorRef);
|
|
imagePreloadService = inject(ImagePreloadService);
|
|
destroyRef = inject(DestroyRef);
|
|
_nzModuleName = NZ_CONFIG_MODULE_NAME;
|
|
nzSrc = '';
|
|
nzAlt = '';
|
|
nzWidth = 'auto';
|
|
nzHeight = 'auto';
|
|
nzSrcLoader = __runInitializers(this, _nzSrcLoader_initializers, defaultImageSrcLoader);
|
|
nzAutoSrcset = (__runInitializers(this, _nzSrcLoader_extraInitializers), __runInitializers(this, _nzAutoSrcset_initializers, false));
|
|
nzPriority = (__runInitializers(this, _nzAutoSrcset_extraInitializers), false);
|
|
nzFallback = __runInitializers(this, _nzFallback_initializers, null);
|
|
nzPlaceholder = (__runInitializers(this, _nzFallback_extraInitializers), __runInitializers(this, _nzPlaceholder_initializers, null));
|
|
nzDisablePreview = (__runInitializers(this, _nzPlaceholder_extraInitializers), __runInitializers(this, _nzDisablePreview_initializers, false));
|
|
imageRef = __runInitializers(this, _nzDisablePreview_extraInitializers);
|
|
src = '';
|
|
width = 'auto';
|
|
height = 'auto';
|
|
srcset = '';
|
|
reloadDisposeHandler = () => void 0;
|
|
constructor() {
|
|
onConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME, () => {
|
|
this.composeImageAttrs();
|
|
this.cdr.markForCheck();
|
|
});
|
|
this.destroyRef.onDestroy(() => {
|
|
this.reloadDisposeHandler();
|
|
});
|
|
}
|
|
ngOnInit() {
|
|
if (this.nzPriority) {
|
|
this.preload();
|
|
}
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { nzLoader, nzSrc, nzOptimize } = changes;
|
|
if (nzSrc || nzLoader || nzOptimize) {
|
|
this.composeImageAttrs();
|
|
}
|
|
}
|
|
preload() {
|
|
this.reloadDisposeHandler = this.imagePreloadService.addPreload({
|
|
src: this.src,
|
|
srcset: this.srcset
|
|
});
|
|
}
|
|
optimizable() {
|
|
if (this.nzAutoSrcset) {
|
|
if (!isFixedSize(this.nzWidth) || !isFixedSize(this.nzHeight)) {
|
|
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`);
|
|
return false;
|
|
}
|
|
if (this.nzSrc.endsWith('.svg')) {
|
|
warn(`SVG does not need to be optimized`);
|
|
return false;
|
|
}
|
|
if (this.nzSrc.startsWith('data:')) {
|
|
warn(`Data URLs cannot be optimized`);
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
composeImageAttrs() {
|
|
const loader = this.getLoader();
|
|
if (!this.optimizable()) {
|
|
this.src = loader({ src: this.nzSrc });
|
|
this.width = this.nzWidth;
|
|
this.height = this.nzHeight;
|
|
return;
|
|
}
|
|
this.width = typeof this.nzWidth === 'number' ? this.nzWidth : parseInt(this.nzWidth, 10);
|
|
this.height = typeof this.nzHeight === 'number' ? this.nzHeight : parseInt(this.nzHeight, 10);
|
|
const widths = this.convertWidths(this.width, sizeBreakpoints);
|
|
this.src = loader({ src: this.nzSrc, width: widths[0] });
|
|
this.srcset = widths
|
|
.map((w, i) => `${loader({
|
|
src: this.nzSrc,
|
|
width: w
|
|
})} ${i + 1}x`)
|
|
.join(', ');
|
|
}
|
|
getLoader() {
|
|
return this.nzSrcLoader || defaultImageSrcLoader;
|
|
}
|
|
convertWidths(width, optimizeSizes) {
|
|
const allSizes = [...optimizeSizes].sort((a, b) => a - b);
|
|
return [
|
|
...new Set(
|
|
// 2x scale is sufficient
|
|
// https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
|
|
[width, width * 2].map(w => allSizes.find(p => p >= w) || w))
|
|
];
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzImageViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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: `
|
|
<img
|
|
#imageRef
|
|
nz-image
|
|
[nzSrc]="src"
|
|
[nzSrcset]="srcset"
|
|
[nzDisablePreview]="nzDisablePreview"
|
|
[nzFallback]="nzFallback"
|
|
[nzPlaceholder]="nzPlaceholder"
|
|
[attr.width]="width"
|
|
[attr.height]="height"
|
|
[attr.srcset]="srcset"
|
|
[attr.alt]="nzAlt || null"
|
|
/>
|
|
`, 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 });
|
|
};
|
|
})();
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzImageViewComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-image',
|
|
exportAs: 'nzImage',
|
|
template: `
|
|
<img
|
|
#imageRef
|
|
nz-image
|
|
[nzSrc]="src"
|
|
[nzSrcset]="srcset"
|
|
[nzDisablePreview]="nzDisablePreview"
|
|
[nzFallback]="nzFallback"
|
|
[nzPlaceholder]="nzPlaceholder"
|
|
[attr.width]="width"
|
|
[attr.height]="height"
|
|
[attr.srcset]="srcset"
|
|
[attr.alt]="nzAlt || null"
|
|
/>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
imports: [NzImageDirective]
|
|
}]
|
|
}], ctorParameters: () => [], propDecorators: { nzSrc: [{
|
|
type: Input
|
|
}], nzAlt: [{
|
|
type: Input
|
|
}], nzWidth: [{
|
|
type: Input
|
|
}], nzHeight: [{
|
|
type: Input
|
|
}], nzSrcLoader: [{
|
|
type: Input
|
|
}], nzAutoSrcset: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzPriority: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzFallback: [{
|
|
type: Input
|
|
}], nzPlaceholder: [{
|
|
type: Input
|
|
}], nzDisablePreview: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], imageRef: [{
|
|
type: ViewChild,
|
|
args: ['imageRef']
|
|
}] } });
|
|
|
|
/**
|
|
* 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 NzImageModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzImageModule, imports: [NzImageViewComponent], exports: [NzImageViewComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzImageModule });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzImageModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [NzImageViewComponent],
|
|
exports: [NzImageViewComponent]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* 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 { NZ_CONFIG_MODULE_NAME, NzImageModule, NzImageViewComponent, createAliObjectsLoader, createCloudinaryLoader, createImgixLoader, defaultImageSrcLoader, isFixedSize, normalizeSrc };
|
|
//# sourceMappingURL=ng-zorro-antd-experimental-image.mjs.map
|