ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
239 lines (231 loc) • 14.3 kB
JavaScript
import { __esDecorate, __runInitializers } from 'tslib';
import * as i0 from '@angular/core';
import { input, EventEmitter, inject, ElementRef, ChangeDetectorRef, computed, afterEveryRender, numberAttribute, ViewChild, Output, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import { switchMap, of } from 'rxjs';
import { withConfigFactory, WithConfig } from 'ng-zorro-antd/core/config';
import { NzBreakpointService, gridResponsiveMap, NzBreakpointEnum } from 'ng-zorro-antd/core/services';
import { isPlainObject, toCssPixel } from 'ng-zorro-antd/core/util';
import * as i1 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
const NZ_CONFIG_MODULE_NAME = 'avatar';
const withConfig = withConfigFactory(NZ_CONFIG_MODULE_NAME);
let NzAvatarComponent = (() => {
let _nzShape_decorators;
let _nzShape_initializers = [];
let _nzShape_extraInitializers = [];
let _nzGap_decorators;
let _nzGap_initializers = [];
let _nzGap_extraInitializers = [];
return class NzAvatarComponent {
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
_nzShape_decorators = [WithConfig()];
_nzGap_decorators = [WithConfig()];
__esDecorate(null, null, _nzShape_decorators, { kind: "field", name: "nzShape", static: false, private: false, access: { has: obj => "nzShape" in obj, get: obj => obj.nzShape, set: (obj, value) => { obj.nzShape = value; } }, metadata: _metadata }, _nzShape_initializers, _nzShape_extraInitializers);
__esDecorate(null, null, _nzGap_decorators, { kind: "field", name: "nzGap", static: false, private: false, access: { has: obj => "nzGap" in obj, get: obj => obj.nzGap, set: (obj, value) => { obj.nzGap = value; } }, metadata: _metadata }, _nzGap_initializers, _nzGap_extraInitializers);
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
}
_nzModuleName = NZ_CONFIG_MODULE_NAME;
nzShape = __runInitializers(this, _nzShape_initializers, 'circle');
nzSize = (__runInitializers(this, _nzShape_extraInitializers), input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzSize" }] : /* istanbul ignore next */ [])));
nzGap = __runInitializers(this, _nzGap_initializers, 4);
nzText = __runInitializers(this, _nzGap_extraInitializers);
nzSrc;
nzSrcSet;
nzAlt;
nzIcon;
nzLoading = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzLoading" }] : /* istanbul ignore next */ []));
nzFetchPriority = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzFetchPriority" }] : /* istanbul ignore next */ []));
nzError = new EventEmitter();
hasText = false;
hasSrc = true;
hasIcon = false;
el = inject(ElementRef).nativeElement;
cdr = inject(ChangeDetectorRef);
breakpointService = inject(NzBreakpointService);
size = withConfig('nzSize', this.nzSize, 'default');
currentBreakpoint = toSignal(toObservable(this.size).pipe(switchMap(size => isPlainObject(size)
? this.breakpointService.subscribe(gridResponsiveMap)
: of(NzBreakpointEnum.md))), { initialValue: NzBreakpointEnum.md });
currentSize = computed(() => {
const size = this.size();
return isPlainObject(size) ? size[this.currentBreakpoint()] : size;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "currentSize" }] : /* istanbul ignore next */ []));
customSize = computed(() => {
const size = this.currentSize();
return typeof size === 'number' ? toCssPixel(size) : null;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "customSize" }] : /* istanbul ignore next */ []));
customFontSize = computed(() => {
const size = this.currentSize();
return typeof size === 'number' ? size / 2 : null;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "customFontSize" }] : /* istanbul ignore next */ []));
textEl;
constructor() {
afterEveryRender(() => this.calcStringSize());
}
imgError(event) {
this.nzError.emit(event);
if (!event.defaultPrevented) {
this.hasSrc = false;
this.hasIcon = false;
this.hasText = false;
if (this.nzIcon) {
this.hasIcon = true;
}
else if (this.nzText) {
this.hasText = true;
}
this.cdr.detectChanges();
}
}
ngOnChanges() {
this.hasText = !this.nzSrc && !!this.nzText;
this.hasIcon = !this.nzSrc && !!this.nzIcon;
this.hasSrc = !!this.nzSrc;
}
calcStringSize() {
if (!this.hasText || !this.textEl) {
return;
}
const textEl = this.textEl.nativeElement;
const childrenWidth = textEl.offsetWidth;
const avatarWidth = this.el.getBoundingClientRect?.().width ?? 0;
const offset = this.nzGap * 2 < avatarWidth ? this.nzGap * 2 : 8;
const scale = avatarWidth - offset < childrenWidth ? (avatarWidth - offset) / childrenWidth : 1;
textEl.style.transform = `scale(${scale}) translateX(-50%)`;
textEl.style.lineHeight = this.customSize() || '';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NzAvatarComponent, isStandalone: true, selector: "nz-avatar", inputs: { nzShape: { classPropertyName: "nzShape", publicName: "nzShape", isSignal: false, isRequired: false, transformFunction: null }, nzSize: { classPropertyName: "nzSize", publicName: "nzSize", isSignal: true, isRequired: false, transformFunction: null }, nzGap: { classPropertyName: "nzGap", publicName: "nzGap", isSignal: false, isRequired: false, transformFunction: numberAttribute }, nzText: { classPropertyName: "nzText", publicName: "nzText", isSignal: false, isRequired: false, transformFunction: null }, nzSrc: { classPropertyName: "nzSrc", publicName: "nzSrc", isSignal: false, isRequired: false, transformFunction: null }, nzSrcSet: { classPropertyName: "nzSrcSet", publicName: "nzSrcSet", isSignal: false, isRequired: false, transformFunction: null }, nzAlt: { classPropertyName: "nzAlt", publicName: "nzAlt", isSignal: false, isRequired: false, transformFunction: null }, nzIcon: { classPropertyName: "nzIcon", publicName: "nzIcon", isSignal: false, isRequired: false, transformFunction: null }, nzLoading: { classPropertyName: "nzLoading", publicName: "nzLoading", isSignal: true, isRequired: false, transformFunction: null }, nzFetchPriority: { classPropertyName: "nzFetchPriority", publicName: "nzFetchPriority", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzError: "nzError" }, host: { properties: { "class.ant-avatar-lg": "size() === 'large'", "class.ant-avatar-sm": "size() === 'small'", "class.ant-avatar-square": "nzShape === 'square'", "class.ant-avatar-circle": "nzShape === 'circle'", "class.ant-avatar-icon": "nzIcon", "class.ant-avatar-image": "hasSrc ", "style.width": "customSize()", "style.height": "customSize()", "style.line-height": "customSize()", "style.font-size.px": "hasIcon ? customFontSize() : null" }, classAttribute: "ant-avatar" }, viewQueries: [{ propertyName: "textEl", first: true, predicate: ["textEl"], descendants: true }], exportAs: ["nzAvatar"], usesOnChanges: true, ngImport: i0, template: `
(nzIcon && hasIcon) {
<nz-icon [nzType]="nzIcon" />
} if (nzSrc && hasSrc) {
<img
[src]="nzSrc"
[attr.srcset]="nzSrcSet"
[attr.alt]="nzAlt"
[attr.loading]="nzLoading() || 'eager'"
[attr.fetchpriority]="nzFetchPriority() || 'auto'"
(error)="imgError($event)"
/>
} if (nzText && hasText) {
<span class="ant-avatar-string" #textEl>{{ nzText }}</span>
}
<ng-content />
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzType", "nzTheme", "nzTwotoneColor", "nzSpin", "nzRotate", "nzIconfont", "aria-label"], exportAs: ["nzIcon"] }], encapsulation: i0.ViewEncapsulation.None });
};
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-avatar',
exportAs: 'nzAvatar',
imports: [NzIconModule],
template: `
(nzIcon && hasIcon) {
<nz-icon [nzType]="nzIcon" />
} if (nzSrc && hasSrc) {
<img
[src]="nzSrc"
[attr.srcset]="nzSrcSet"
[attr.alt]="nzAlt"
[attr.loading]="nzLoading() || 'eager'"
[attr.fetchpriority]="nzFetchPriority() || 'auto'"
(error)="imgError($event)"
/>
} if (nzText && hasText) {
<span class="ant-avatar-string" #textEl>{{ nzText }}</span>
}
<ng-content />
`,
host: {
class: 'ant-avatar',
'[class.ant-avatar-lg]': `size() === 'large'`,
'[class.ant-avatar-sm]': `size() === 'small'`,
'[class.ant-avatar-square]': `nzShape === 'square'`,
'[class.ant-avatar-circle]': `nzShape === 'circle'`,
'[class.ant-avatar-icon]': `nzIcon`,
'[class.ant-avatar-image]': `hasSrc `,
'[style.width]': 'customSize()',
'[style.height]': 'customSize()',
'[style.line-height]': 'customSize()',
'[style.font-size.px]': 'hasIcon ? customFontSize() : null'
},
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: () => [], propDecorators: { nzShape: [{
type: Input
}], nzSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzSize", required: false }] }], nzGap: [{
type: Input,
args: [{ transform: numberAttribute }]
}], nzText: [{
type: Input
}], nzSrc: [{
type: Input
}], nzSrcSet: [{
type: Input
}], nzAlt: [{
type: Input
}], nzIcon: [{
type: Input
}], nzLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzLoading", required: false }] }], nzFetchPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzFetchPriority", required: false }] }], nzError: [{
type: Output
}], textEl: [{
type: ViewChild,
args: ['textEl', { static: false }]
}] } });
/**
* 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 NzAvatarGroupComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: NzAvatarGroupComponent, isStandalone: true, selector: "nz-avatar-group", host: { classAttribute: "ant-avatar-group" }, exportAs: ["nzAvatarGroup"], ngImport: i0, template: `<ng-content />`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarGroupComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-avatar-group',
exportAs: 'nzAvatarGroup',
template: `<ng-content />`,
host: {
class: 'ant-avatar-group'
}
}]
}] });
/**
* 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 NzAvatarModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarModule, imports: [NzAvatarComponent, NzAvatarGroupComponent], exports: [NzAvatarComponent, NzAvatarGroupComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarModule, imports: [NzAvatarComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NzAvatarModule, decorators: [{
type: NgModule,
args: [{
exports: [NzAvatarComponent, NzAvatarGroupComponent],
imports: [NzAvatarComponent, NzAvatarGroupComponent]
}]
}] });
/**
* 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 { NzAvatarComponent, NzAvatarGroupComponent, NzAvatarModule };
//# sourceMappingURL=ng-zorro-antd-avatar.mjs.map