@ng-nest/ui 17.0.11 → 18.0.0

package/fesm2022/ng-nest-ui-avatar.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, Renderer2, ElementRef, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XInputNumber, XConfigService, XIsChange, XIsEmpty, XIsNumber, XIsString, XIsObject, XResize } from '@ng-nest/ui/core';
+import { input, Component, inject, viewChild, computed, ElementRef, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue, XProperty, XComputedStyle, XResize, XIsNumber, XIsObject, XIsEmpty, XIsString, XToCssPx } from '@ng-nest/ui/core';
 import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
-import { Subject, takeUntil } from 'rxjs';
+import { debounceTime, map } from 'rxjs';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Avatar
@@ -13,50 +13,122 @@ import { XOutletDirective } from '@ng-nest/ui/outlet';
  * @decorator component
  */
 const XAvatarPrefix = 'x-avatar';
-const X_CONFIG_NAME = 'avatar';
+const X_AVATAR_CONFIG_NAME = 'avatar';
 /**
  * Avatar Property
  */
-class XAvatarProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XAvatarProperty, selector: "x-avatar-property", inputs: { label: "label", size: "size", icon: "icon", shape: "shape", src: "src", fit: "fit", gap: "gap", backgroundColor: "backgroundColor" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XAvatarProperty extends XPropertyFunction(X_AVATAR_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 显示字符
+         * @en_US Display characters
+         * @example
+         *
+         * ```html
+         * <x-avatar label="ng-nest"></x-avatar>
+         * ```
+         *
+         */
+        this.label = input();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         * @example
+         *
+         * ```html
+         * <x-avatar size="big" icon="fto-user"></x-avatar>
+         * <x-avatar size="large" icon="fto-user"></x-avatar>
+         * <x-avatar size="medium"  icon="fto-user"></x-avatar>
+         * <x-avatar size="small" icon="fto-user"></x-avatar>
+         * <x-avatar size="mini" icon="fto-user"></x-avatar>
+         * <x-avatar [size]="100" icon="fto-user"></x-avatar>
+         * <x-avatar [size]="{ xs: 20, sm: 60, md: 90, lg: 120, xl: 160 }" icon="fto-user"></x-avatar>
+         * ```
+         *
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 显示图标
+         * @en_US Show icon
+         * @example
+         *
+         * ```html
+         * <x-avatar icon="fto-user"></x-avatar>
+         * ```
+         *
+         */
+        this.icon = input();
+        /**
+         * @zh_CN 形状
+         * @en_US Shape
+         * @example
+         *
+         * ```html
+         * <x-avatar icon="fto-user" shape="circle"></x-avatar>
+         * <x-avatar icon="fto-user" shape="square"></x-avatar>
+         * ```
+         *
+         */
+        this.shape = input(this.config?.shape ?? 'circle');
+        /**
+         * @zh_CN 图片地址
+         * @en_US The map's address
+         * @example
+         *
+         * ```html
+         * <x-avatar src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * ```
+         *
+         */
+        this.src = input();
+        /**
+         * @zh_CN 图片适应方式
+         * @en_US Image adaptation method
+         * @example
+         *
+         * ```html
+         * <x-avatar fit="fill" src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * <x-avatar fit="contain" src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * <x-avatar fit="cover" src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * <x-avatar fit="none" src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * <x-avatar fit="scale-down" src="https://ngnest.com/assets/img/logo/logo-144x144.png"></x-avatar>
+         * ```
+         *
+         */
+        this.fit = input(this.config?.fit ?? 'cover');
+        /**
+         * @zh_CN 字符类型的时候左右边距
+         * @en_US When the character type is the left and right distance
+         * @example
+         *
+         * ```html
+         * <x-avatar label="ng-nest" gap="5"></x-avatar>
+         * <x-avatar label="ng-nest" gap="5px"></x-avatar>
+         * ```
+         *
+         */
+        this.gap = input(this.config?.gap ?? '4px', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 背景颜色
+         * @en_US Background color
+         * @example
+         *
+         * ```html
+         * <x-avatar label="ng-nest" backgroundColor="#999999"></x-avatar>
+         * <x-avatar label="ng-nest" backgroundColor="#888888"></x-avatar>
+         * ```
+         *
+         */
+        this.backgroundColor = input(this.config?.backgroundColor ?? '#999999');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XAvatarProperty, selector: "x-avatar-property", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XAvatarProperty.prototype, "size", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'circle')
-], XAvatarProperty.prototype, "shape", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'cover')
-], XAvatarProperty.prototype, "fit", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 4),
-    XInputNumber()
-], XAvatarProperty.prototype, "gap", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '#999999')
-], XAvatarProperty.prototype, "backgroundColor", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAvatarPrefix}-property`, template: '' }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], shape: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], fit: [{
-                type: Input
-            }], gap: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Avatar Group
  * @selector x-avatar-group
@@ -67,63 +139,42 @@ const XAvatarGroupPrefix = 'x-avatar-group';
  * Avatar Group Property
  */
 class XAvatarGroupProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarGroupProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XAvatarGroupProperty, selector: "x-avatar-group-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarGroupProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XAvatarGroupProperty, selector: "x-avatar-group-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarGroupProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarGroupProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAvatarGroupPrefix}-property`, template: '' }]
         }] });
 
 class XAvatarComponent extends XAvatarProperty {
     constructor() {
-        super(...arguments);
-        this.isImgError = false;
-        this.styleMap = {};
+        super();
         this.document = inject(DOCUMENT);
-        this._unSubject = new Subject();
-        this.renderer = inject(Renderer2);
+        this.labelRef = viewChild('labelRef');
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
         this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.configService = inject(XConfigService);
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
-        this._resizeObserver?.disconnect();
-    }
-    ngOnChanges(changes) {
-        let { label } = changes;
-        XIsChange(label) && setTimeout(() => this.setLabel());
-    }
-    ngAfterViewInit() {
-        this.setClassMap();
-        this.setLabel();
-    }
-    setClassMap() {
-        this.classMap = {
-            [`${XAvatarPrefix}-${this.shape}`]: !XIsEmpty(this.shape)
-        };
-        if (XIsNumber(this.size)) {
-            const nsize = Number(this.size);
-            this.setStyleMap(nsize);
-            this.cdr.detectChanges();
-        }
-        else if (XIsString(this.size)) {
-            this.classMap[`${XAvatarPrefix}-${this.size}`] = !XIsEmpty(this.size);
-            this.cdr.detectChanges();
-        }
-        else if (XIsObject(this.size)) {
-            this.classMap[`${XAvatarPrefix}-medium`] = true;
-            const sz = this.size;
-            let { xs, sm, md, lg, xl } = sz;
-            if (!xs && !sm && !md && !lg && !xl)
-                return;
-            XResize(this.document.documentElement)
-                .pipe(takeUntil(this._unSubject))
-                .subscribe((x) => {
-                this._resizeObserver = x.resizeObserver;
-                const width = this.document.documentElement.clientWidth;
+        this.labelWidth = signal(this.labelRef()?.nativeElement.clientWidth);
+        this.documentWidth = toSignal(XResize(this.document.documentElement).pipe(debounceTime(30), map(({ resizeObserver }) => {
+            this.resizeObserver = resizeObserver;
+            return this.document.documentElement.clientWidth;
+        })), {
+            initialValue: this.document.documentElement.clientWidth
+        });
+        this.isImgError = signal(false);
+        this.styleMap = computed(() => {
+            const size = this.size();
+            const width = this.documentWidth();
+            if (XIsNumber(size)) {
+                return {
+                    height: `${size}px`,
+                    width: `${size}px`,
+                    lineHeight: `${size}px`,
+                    fontSize: `${size * 0.6}px`
+                };
+            }
+            else if (XIsObject(size)) {
+                const { xs, sm, md, lg, xl } = size;
                 let nsize = 40;
                 if (xs && width < 768) {
                     nsize = xs;
@@ -140,55 +191,69 @@ class XAvatarComponent extends XAvatarProperty {
                 if (xl && width >= 1920) {
                     nsize = xl;
                 }
-                this.setStyleMap(nsize);
-                this.cdr.detectChanges();
-                this.setLabel();
-            });
-        }
+                return {
+                    height: `${nsize}px`,
+                    width: `${nsize}px`,
+                    lineHeight: `${nsize}px`,
+                    fontSize: `${nsize * 0.6}px`
+                };
+            }
+            else {
+                return {};
+            }
+        });
+        this.classMap = computed(() => {
+            const classMap = {
+                [`${XAvatarPrefix}-${this.shape()}`]: !XIsEmpty(this.shape())
+            };
+            const size = this.size();
+            if (XIsString(size)) {
+                classMap[`${XAvatarPrefix}-${size}`] = !XIsEmpty(size);
+            }
+            else if (XIsObject(size)) {
+                classMap[`${XAvatarPrefix}-medium`] = true;
+            }
+            return classMap;
+        });
+        this.labelStyleMap = computed(() => {
+            const label = this.label();
+            const labelRef = this.labelRef();
+            const labelWidth = this.labelWidth();
+            if (!label || !this.elementRef || !labelRef || !labelWidth)
+                return {};
+            const eleWidth = this.elementRef.nativeElement.clientWidth;
+            let scale = (eleWidth - XToCssPx(this.gap(), this.fontSize()) * 2) / labelWidth;
+            scale = scale > 1 ? 1 : scale;
+            return { transform: `scale(${scale})` };
+        });
+        effect(() => this.documentWidth());
     }
-    setStyleMap(size) {
-        this.styleMap = {
-            height: `${size}px`,
-            width: `${size}px`,
-            lineHeight: `${size}px`,
-            fontSize: `${size * 0.6}px`
-        };
+    ngAfterContentChecked() {
+        this.labelWidth.set(this.labelRef()?.nativeElement.clientWidth);
     }
-    setLabel() {
-        if (!this.label)
-            return;
-        if (!this.elementRef || !this.labelRef)
-            return;
-        const eleWidth = this.elementRef.nativeElement.clientWidth;
-        const labelWidth = this.labelRef.nativeElement.clientWidth;
-        let scale = (eleWidth - Number(this.gap) * 2) / labelWidth;
-        scale = scale > 1 ? 1 : scale;
-        this.renderer.setStyle(this.labelRef.nativeElement, 'transform', `scale(${scale})`);
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
     }
     imgError() {
-        this.isImgError = true;
-        this.cdr.detectChanges();
+        this.isImgError.set(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XAvatarComponent, isStandalone: true, selector: "x-avatar", viewQueries: [{ propertyName: "labelRef", first: true, predicate: ["labelRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-avatar-error]=\"isImgError\"\r\n  [ngStyle]=\"styleMap\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (src && !isImgError) {\r\n    <img [src]=\"src\" [style.object-fit]=\"fit\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (isImgError) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  <span #labelRef *xOutlet=\"label; context: { $label: label }\">\r\n    {{ label }}\r\n  </span>\r\n</span>\r\n", styles: ["x-avatar{display:flex}.x-avatar{margin:0;padding:0;font-size:var(--x-font-size);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--x-background-100)}.x-avatar>img{display:block;height:100%}.x-avatar-circle{border-radius:50%}.x-avatar-square{border-radius:var(--x-border-radius)}.x-avatar-error>img{height:initial}.x-avatar>span{white-space:nowrap}.x-avatar-big{height:3.5rem;width:3.5rem;line-height:3.5rem;font-size:2.1rem}.x-avatar-large{height:3rem;width:3rem;line-height:3rem;font-size:1.8rem}.x-avatar-medium{height:2.5rem;width:2.5rem;line-height:2.5rem;font-size:1.5rem}.x-avatar-small{height:2rem;width:2rem;line-height:2rem;font-size:1.2rem}.x-avatar-mini{height:1.5rem;width:1.5rem;line-height:1.5rem;font-size:.9rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XAvatarComponent, isStandalone: true, selector: "x-avatar", viewQueries: [{ propertyName: "labelRef", first: true, predicate: ["labelRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-avatar-error]=\"isImgError()\"\r\n  [ngStyle]=\"styleMap()\"\r\n  [style.backgroundColor]=\"backgroundColor()\"\r\n>\r\n  @if (src() && !isImgError()) {\r\n    <img [src]=\"src()\" [style.object-fit]=\"fit()\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (isImgError()) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  @if (label()) {\r\n    <span #labelRef [ngStyle]=\"labelStyleMap()\" *xOutlet=\"label(); context: { $label: label() }\">\r\n      {{ label() }}\r\n    </span>\r\n  }\r\n</span>\r\n", styles: ["x-avatar{display:flex}.x-avatar{margin:0;padding:0;font-size:var(--x-font-size);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--x-background-100)}.x-avatar>img{display:block;height:100%}.x-avatar-circle{border-radius:50%}.x-avatar-square{border-radius:var(--x-border-radius)}.x-avatar-error>img{height:initial}.x-avatar>span{white-space:nowrap;transition:transform var(--x-animation-duration-base)}.x-avatar-big{height:3.5rem;width:3.5rem;line-height:3.5rem;font-size:2.1rem}.x-avatar-large{height:3rem;width:3rem;line-height:3rem;font-size:1.8rem}.x-avatar-medium{height:2.5rem;width:2.5rem;line-height:2.5rem;font-size:1.5rem}.x-avatar-small{height:2rem;width:2rem;line-height:2rem;font-size:1.2rem}.x-avatar-mini{height:1.5rem;width:1.5rem;line-height:1.5rem;font-size:.9rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XAvatarPrefix}`, standalone: true, imports: [NgClass, NgStyle, XOutletDirective, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-avatar-error]=\"isImgError\"\r\n  [ngStyle]=\"styleMap\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (src && !isImgError) {\r\n    <img [src]=\"src\" [style.object-fit]=\"fit\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (isImgError) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  <span #labelRef *xOutlet=\"label; context: { $label: label }\">\r\n    {{ label }}\r\n  </span>\r\n</span>\r\n", styles: ["x-avatar{display:flex}.x-avatar{margin:0;padding:0;font-size:var(--x-font-size);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--x-background-100)}.x-avatar>img{display:block;height:100%}.x-avatar-circle{border-radius:50%}.x-avatar-square{border-radius:var(--x-border-radius)}.x-avatar-error>img{height:initial}.x-avatar>span{white-space:nowrap}.x-avatar-big{height:3.5rem;width:3.5rem;line-height:3.5rem;font-size:2.1rem}.x-avatar-large{height:3rem;width:3rem;line-height:3rem;font-size:1.8rem}.x-avatar-medium{height:2.5rem;width:2.5rem;line-height:2.5rem;font-size:1.5rem}.x-avatar-small{height:2rem;width:2rem;line-height:2rem;font-size:1.2rem}.x-avatar-mini{height:1.5rem;width:1.5rem;line-height:1.5rem;font-size:.9rem}\n"] }]
-        }], propDecorators: { labelRef: [{
-                type: ViewChild,
-                args: ['labelRef']
-            }] } });
+            args: [{ selector: `${XAvatarPrefix}`, standalone: true, imports: [NgClass, NgStyle, XOutletDirective, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-avatar-error]=\"isImgError()\"\r\n  [ngStyle]=\"styleMap()\"\r\n  [style.backgroundColor]=\"backgroundColor()\"\r\n>\r\n  @if (src() && !isImgError()) {\r\n    <img [src]=\"src()\" [style.object-fit]=\"fit()\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (isImgError()) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  @if (label()) {\r\n    <span #labelRef [ngStyle]=\"labelStyleMap()\" *xOutlet=\"label(); context: { $label: label() }\">\r\n      {{ label() }}\r\n    </span>\r\n  }\r\n</span>\r\n", styles: ["x-avatar{display:flex}.x-avatar{margin:0;padding:0;font-size:var(--x-font-size);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--x-background-100)}.x-avatar>img{display:block;height:100%}.x-avatar-circle{border-radius:50%}.x-avatar-square{border-radius:var(--x-border-radius)}.x-avatar-error>img{height:initial}.x-avatar>span{white-space:nowrap;transition:transform var(--x-animation-duration-base)}.x-avatar-big{height:3.5rem;width:3.5rem;line-height:3.5rem;font-size:2.1rem}.x-avatar-large{height:3rem;width:3rem;line-height:3rem;font-size:1.8rem}.x-avatar-medium{height:2.5rem;width:2.5rem;line-height:2.5rem;font-size:1.5rem}.x-avatar-small{height:2rem;width:2rem;line-height:2rem;font-size:1.2rem}.x-avatar-mini{height:1.5rem;width:1.5rem;line-height:1.5rem;font-size:.9rem}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XAvatarGroupComponent extends XAvatarGroupProperty {
     constructor() {
         super(...arguments);
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XAvatarGroupComponent, isStandalone: true, selector: "x-avatar-group", host: { properties: { "class.x-avatar-group": "this._has" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["x-avatar-group{display:flex}.x-avatar-group{margin:0;padding:0}.x-avatar-group>x-avatar{z-index:0}.x-avatar-group>x-avatar:not(:first-child){margin-left:-.5rem}.x-avatar-group>x-avatar .x-avatar{border:var(--x-border-width) var(--x-border-style) var(--x-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XAvatarGroupComponent, isStandalone: true, selector: "x-avatar-group", host: { properties: { "class.x-avatar-group": "this._has" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["x-avatar-group{display:flex}.x-avatar-group{margin:0;padding:0}.x-avatar-group>x-avatar{z-index:0}.x-avatar-group>x-avatar:not(:first-child){margin-left:-.5rem}.x-avatar-group>x-avatar .x-avatar{border:var(--x-border-width) var(--x-border-style) var(--x-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAvatarGroupPrefix}`, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: ["x-avatar-group{display:flex}.x-avatar-group{margin:0;padding:0}.x-avatar-group>x-avatar{z-index:0}.x-avatar-group>x-avatar:not(:first-child){margin-left:-.5rem}.x-avatar-group>x-avatar .x-avatar{border:var(--x-border-width) var(--x-border-style) var(--x-white)}\n"] }]
         }], propDecorators: { _has: [{
@@ -197,11 +262,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class XAvatarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XAvatarModule, imports: [XAvatarComponent, XAvatarGroupComponent], exports: [XAvatarComponent, XAvatarGroupComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarModule, imports: [XAvatarComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XAvatarModule, imports: [XAvatarComponent, XAvatarGroupComponent], exports: [XAvatarComponent, XAvatarGroupComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarModule, imports: [XAvatarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XAvatarComponent, XAvatarGroupComponent],
@@ -213,5 +278,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XAvatarComponent, XAvatarGroupComponent, XAvatarGroupPrefix, XAvatarGroupProperty, XAvatarModule, XAvatarPrefix, XAvatarProperty };
+export { XAvatarComponent, XAvatarGroupComponent, XAvatarGroupPrefix, XAvatarGroupProperty, XAvatarModule, XAvatarPrefix, XAvatarProperty, X_AVATAR_CONFIG_NAME };
 //# sourceMappingURL=ng-nest-ui-avatar.mjs.map

package/fesm2022/ng-nest-ui-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-avatar.mjs","sources":["../../../../lib/ng-nest/ui/avatar/avatar.property.ts","../../../../lib/ng-nest/ui/avatar/avatar.component.ts","../../../../lib/ng-nest/ui/avatar/avatar.component.html","../../../../lib/ng-nest/ui/avatar/avatar-group.component.ts","../../../../lib/ng-nest/ui/avatar/avatar-group.component.html","../../../../lib/ng-nest/ui/avatar/avatar.module.ts","../../../../lib/ng-nest/ui/avatar/ng-nest-ui-avatar.ts"],"sourcesContent":["import {\r\n  XSize,\r\n  XTemplate,\r\n  XProperty,\r\n  XWithConfig,\r\n  XShape,\r\n  XFit,\r\n  XResponseSize,\r\n  XNumber,\r\n  XInputNumber\r\n} from '@ng-nest/ui/core';\r\nimport { Input, Component } from '@angular/core';\r\n\r\n/**\r\n * Avatar\r\n * @selector x-avatar\r\n * @decorator component\r\n */\r\nexport const XAvatarPrefix = 'x-avatar';\r\nconst X_CONFIG_NAME = 'avatar';\r\n\r\n/**\r\n * Avatar Property\r\n */\r\n@Component({ selector: `${XAvatarPrefix}-property`, template: '' })\r\nexport class XAvatarProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 显示字符\r\n   * @en_US Display characters\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XAvatarSize>(X_CONFIG_NAME, 'medium') size?: XAvatarSize;\r\n  /**\r\n   * @zh_CN 显示图标\r\n   * @en_US Show icon\r\n   */\r\n  @Input() icon?: string;\r\n  /**\r\n   * @zh_CN 形状\r\n   * @en_US Shape\r\n   */\r\n  @Input() @XWithConfig<XAvatarShape>(X_CONFIG_NAME, 'circle') shape?: XAvatarShape;\r\n  /**\r\n   * @zh_CN 图片地址\r\n   * @en_US The map's address\r\n   */\r\n  @Input() src?: string;\r\n  /**\r\n   * @zh_CN 图片适应方式\r\n   * @en_US Image adaptation method\r\n   */\r\n  @Input() @XWithConfig<XAvatarFit>(X_CONFIG_NAME, 'cover') fit?: XAvatarFit;\r\n  /**\r\n   * @zh_CN 字符类型的时候左右边距，px\r\n   * @en_US When the character type is the left and right distance, PX\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 4) @XInputNumber() gap?: XNumber;\r\n  /**\r\n   * @zh_CN 背景颜色\r\n   * @en_US Background color\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME, '#999999') backgroundColor?: string;\r\n}\r\n\r\n/**\r\n * @zh_CN 头像形状\r\n * @en_US Avatar shape\r\n */\r\nexport type XAvatarShape = XShape;\r\n\r\n/**\r\n * @zh_CN 当展示类型为图片的时候，设置图片如何适应容器框\r\n * @en_US When the display type is picture, set how the picture fits into the container frame\r\n */\r\nexport type XAvatarFit = XFit;\r\n\r\n/**\r\n * @zh_CN 尺寸类型\r\n * @en_US Size type\r\n */\r\nexport type XAvatarSize = number | XSize | XResponseSize;\r\n\r\n/**\r\n * Avatar Group\r\n * @selector x-avatar-group\r\n * @decorator component\r\n */\r\nexport const XAvatarGroupPrefix = 'x-avatar-group';\r\n\r\n/**\r\n * Avatar Group Property\r\n */\r\n@Component({ selector: `${XAvatarGroupPrefix}-property`, template: '' })\r\nexport class XAvatarGroupProperty extends XProperty {}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  OnDestroy,\r\n  ViewChild,\r\n  AfterViewInit,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  inject\r\n} from '@angular/core';\r\nimport { XAvatarPrefix, XAvatarProperty } from './avatar.property';\r\nimport {\r\n  XIsEmpty,\r\n  XConfigService,\r\n  XIsNumber,\r\n  XIsString,\r\n  XResize,\r\n  XIsObject,\r\n  XResponseSize,\r\n  XIsChange,\r\n  XResizeObserver\r\n} from '@ng-nest/ui/core';\r\nimport { DOCUMENT, NgClass, NgStyle } from '@angular/common';\r\nimport { Subject, takeUntil } from 'rxjs';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\n\r\n@Component({\r\n  selector: `${XAvatarPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgStyle, XOutletDirective, XIconComponent],\r\n  templateUrl: './avatar.component.html',\r\n  styleUrls: ['./avatar.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAvatarComponent extends XAvatarProperty implements OnDestroy, OnChanges, AfterViewInit {\r\n  isImgError: boolean = false;\r\n\r\n  styleMap: { [key: string]: any } = {};\r\n  document = inject(DOCUMENT);\r\n  private _unSubject = new Subject<void>();\r\n  private _resizeObserver!: XResizeObserver;\r\n\r\n  @ViewChild('labelRef') labelRef!: ElementRef<HTMLElement>;\r\n\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n  private cdr = inject(ChangeDetectorRef);\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnDestroy(): void {\r\n    this._unSubject.next();\r\n    this._unSubject.complete();\r\n    this._resizeObserver?.disconnect();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    let { label } = changes;\r\n    XIsChange(label) && setTimeout(() => this.setLabel());\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.setClassMap();\r\n    this.setLabel();\r\n  }\r\n\r\n  setClassMap() {\r\n    this.classMap = {\r\n      [`${XAvatarPrefix}-${this.shape}`]: !XIsEmpty(this.shape)\r\n    };\r\n    if (XIsNumber(this.size)) {\r\n      const nsize = Number(this.size);\r\n      this.setStyleMap(nsize);\r\n      this.cdr.detectChanges();\r\n    } else if (XIsString(this.size)) {\r\n      this.classMap[`${XAvatarPrefix}-${this.size}`] = !XIsEmpty(this.size);\r\n      this.cdr.detectChanges();\r\n    } else if (XIsObject(this.size)) {\r\n      this.classMap[`${XAvatarPrefix}-medium`] = true;\r\n      const sz = this.size as XResponseSize;\r\n      let { xs, sm, md, lg, xl } = sz;\r\n      if (!xs && !sm && !md && !lg && !xl) return;\r\n      XResize(this.document.documentElement)\r\n        .pipe(takeUntil(this._unSubject))\r\n        .subscribe((x) => {\r\n          this._resizeObserver = x.resizeObserver;\r\n          const width = this.document.documentElement.clientWidth;\r\n          let nsize = 40;\r\n          if (xs && width < 768) {\r\n            nsize = xs;\r\n          }\r\n          if (sm && width >= 768) {\r\n            nsize = sm;\r\n          }\r\n          if (md && width >= 992) {\r\n            nsize = md;\r\n          }\r\n          if (lg && width >= 1200) {\r\n            nsize = lg;\r\n          }\r\n          if (xl && width >= 1920) {\r\n            nsize = xl;\r\n          }\r\n          this.setStyleMap(nsize);\r\n          this.cdr.detectChanges();\r\n          this.setLabel();\r\n        });\r\n    }\r\n  }\r\n\r\n  setStyleMap(size: number) {\r\n    this.styleMap = {\r\n      height: `${size}px`,\r\n      width: `${size}px`,\r\n      lineHeight: `${size}px`,\r\n      fontSize: `${size * 0.6}px`\r\n    };\r\n  }\r\n\r\n  setLabel() {\r\n    if (!this.label) return;\r\n    if (!this.elementRef || !this.labelRef) return;\r\n    const eleWidth = this.elementRef.nativeElement.clientWidth;\r\n    const labelWidth = this.labelRef.nativeElement.clientWidth;\r\n    let scale = (eleWidth - Number(this.gap) * 2) / labelWidth;\r\n    scale = scale > 1 ? 1 : scale;\r\n    this.renderer.setStyle(this.labelRef.nativeElement, 'transform', `scale(${scale})`);\r\n  }\r\n\r\n  imgError() {\r\n    this.isImgError = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n","<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-avatar-error]=\"isImgError\"\r\n  [ngStyle]=\"styleMap\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (src && !isImgError) {\r\n    <img [src]=\"src\" [style.object-fit]=\"fit\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (isImgError) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  <span #labelRef *xOutlet=\"label; context: { $label: label }\">\r\n    {{ label }}\r\n  </span>\r\n</span>\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XAvatarGroupPrefix, XAvatarGroupProperty } from './avatar.property';\r\n\r\n@Component({\r\n  selector: `${XAvatarGroupPrefix}`,\r\n  standalone: true,\r\n  templateUrl: './avatar-group.component.html',\r\n  styleUrls: ['./avatar-group.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAvatarGroupComponent extends XAvatarGroupProperty {\r\n  @HostBinding('class.x-avatar-group') _has = true;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XAvatarComponent } from './avatar.component';\r\nimport { XAvatarGroupComponent } from './avatar-group.component';\r\n\r\n@NgModule({\r\n  exports: [XAvatarComponent, XAvatarGroupComponent],\r\n  imports: [XAvatarComponent, XAvatarGroupComponent]\r\n})\r\nexport class XAvatarModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-avatar.mjs","sources":["../../../../lib/ng-nest/ui/avatar/avatar.property.ts","../../../../lib/ng-nest/ui/avatar/avatar.component.ts","../../../../lib/ng-nest/ui/avatar/avatar.component.html","../../../../lib/ng-nest/ui/avatar/avatar-group.component.ts","../../../../lib/ng-nest/ui/avatar/avatar-group.component.html","../../../../lib/ng-nest/ui/avatar/avatar.module.ts","../../../../lib/ng-nest/ui/avatar/ng-nest-ui-avatar.ts"],"sourcesContent":["import {\r\n  XSize,\r\n  XTemplate,\r\n  XProperty,\r\n  XShape,\r\n  XFit,\r\n  XResponseSize,\r\n  XNumber,\r\n  XPropertyFunction,\r\n  XToCssPixelValue\r\n} from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\n\r\n/**\r\n * Avatar\r\n * @selector x-avatar\r\n * @decorator component\r\n */\r\nexport const XAvatarPrefix = 'x-avatar';\r\nexport const X_AVATAR_CONFIG_NAME = 'avatar';\r\n\r\n/**\r\n * Avatar Property\r\n */\r\n@Component({ selector: `${XAvatarPrefix}-property`, template: '' })\r\nexport class XAvatarProperty extends XPropertyFunction(X_AVATAR_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 显示字符\r\n   * @en_US Display characters\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar label=\"ng-nest\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly label = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar size=\"big\" icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar size=\"large\" icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar size=\"medium\"  icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar size=\"small\" icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar size=\"mini\" icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar [size]=\"100\" icon=\"fto-user\"></x-avatar>\r\n   * <x-avatar [size]=\"{ xs: 20, sm: 60, md: 90, lg: 120, xl: 160 }\" icon=\"fto-user\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly size = input<XAvatarSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 显示图标\r\n   * @en_US Show icon\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar icon=\"fto-user\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly icon = input<string>();\r\n  /**\r\n   * @zh_CN 形状\r\n   * @en_US Shape\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar icon=\"fto-user\" shape=\"circle\"></x-avatar>\r\n   * <x-avatar icon=\"fto-user\" shape=\"square\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly shape = input<XAvatarShape>(this.config?.shape ?? 'circle');\r\n  /**\r\n   * @zh_CN 图片地址\r\n   * @en_US The map's address\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly src = input<string>();\r\n  /**\r\n   * @zh_CN 图片适应方式\r\n   * @en_US Image adaptation method\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar fit=\"fill\" src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * <x-avatar fit=\"contain\" src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * <x-avatar fit=\"cover\" src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * <x-avatar fit=\"none\" src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * <x-avatar fit=\"scale-down\" src=\"https://ngnest.com/assets/img/logo/logo-144x144.png\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly fit = input<XAvatarFit>(this.config?.fit ?? 'cover');\r\n  /**\r\n   * @zh_CN 字符类型的时候左右边距\r\n   * @en_US When the character type is the left and right distance\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar label=\"ng-nest\" gap=\"5\"></x-avatar>\r\n   * <x-avatar label=\"ng-nest\" gap=\"5px\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly gap = input<string, XNumber>(this.config?.gap ?? '4px', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 背景颜色\r\n   * @en_US Background color\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-avatar label=\"ng-nest\" backgroundColor=\"#999999\"></x-avatar>\r\n   * <x-avatar label=\"ng-nest\" backgroundColor=\"#888888\"></x-avatar>\r\n   * ```\r\n   *\r\n   */\r\n  readonly backgroundColor = input<string>(this.config?.backgroundColor ?? '#999999');\r\n}\r\n\r\n/**\r\n * @zh_CN 头像形状\r\n * @en_US Avatar shape\r\n */\r\nexport type XAvatarShape = XShape;\r\n\r\n/**\r\n * @zh_CN 当展示类型为图片的时候，设置图片如何适应容器框\r\n * @en_US When the display type is picture, set how the picture fits into the container frame\r\n */\r\nexport type XAvatarFit = XFit;\r\n\r\n/**\r\n * @zh_CN 尺寸类型\r\n * @en_US Size type\r\n */\r\nexport type XAvatarSize = number | XSize | XResponseSize;\r\n\r\n/**\r\n * Avatar Group\r\n * @selector x-avatar-group\r\n * @decorator component\r\n */\r\nexport const XAvatarGroupPrefix = 'x-avatar-group';\r\n\r\n/**\r\n * Avatar Group Property\r\n */\r\n@Component({ selector: `${XAvatarGroupPrefix}-property`, template: '' })\r\nexport class XAvatarGroupProperty extends XProperty {}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ElementRef,\r\n  ChangeDetectionStrategy,\r\n  OnDestroy,\r\n  inject,\r\n  signal,\r\n  computed,\r\n  viewChild,\r\n  effect\r\n} from '@angular/core';\r\nimport { XAvatarPrefix, XAvatarProperty } from './avatar.property';\r\nimport { XIsEmpty, XIsNumber, XIsString, XIsObject, XComputedStyle, XResize, XToCssPx } from '@ng-nest/ui/core';\r\nimport { DOCUMENT, NgClass, NgStyle } from '@angular/common';\r\nimport { debounceTime, map } from 'rxjs';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport type { XClassMap, XResizeObserver, XResponseSize } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XAvatarPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgStyle, XOutletDirective, XIconComponent],\r\n  templateUrl: './avatar.component.html',\r\n  styleUrls: ['./avatar.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAvatarComponent extends XAvatarProperty implements OnDestroy {\r\n  private document = inject(DOCUMENT);\r\n  private labelRef = viewChild<ElementRef<HTMLElement>>('labelRef');\r\n  private fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));\r\n  private resizeObserver!: XResizeObserver;\r\n  private elementRef = inject(ElementRef);\r\n  private labelWidth = signal(this.labelRef()?.nativeElement.clientWidth);\r\n  private documentWidth = toSignal(\r\n    XResize(this.document.documentElement).pipe(\r\n      debounceTime(30),\r\n      map(({ resizeObserver }) => {\r\n        this.resizeObserver = resizeObserver;\r\n        return this.document.documentElement.clientWidth;\r\n      })\r\n    ),\r\n    {\r\n      initialValue: this.document.documentElement.clientWidth\r\n    }\r\n  );\r\n  isImgError = signal(false);\r\n  styleMap = computed(() => {\r\n    const size = this.size();\r\n    const width = this.documentWidth();\r\n    if (XIsNumber(size)) {\r\n      return {\r\n        height: `${size}px`,\r\n        width: `${size}px`,\r\n        lineHeight: `${size}px`,\r\n        fontSize: `${size * 0.6}px`\r\n      };\r\n    } else if (XIsObject<XResponseSize>(size)) {\r\n      const { xs, sm, md, lg, xl } = size;\r\n      let nsize = 40;\r\n      if (xs && width < 768) {\r\n        nsize = xs;\r\n      }\r\n      if (sm && width >= 768) {\r\n        nsize = sm;\r\n      }\r\n      if (md && width >= 992) {\r\n        nsize = md;\r\n      }\r\n      if (lg && width >= 1200) {\r\n        nsize = lg;\r\n      }\r\n      if (xl && width >= 1920) {\r\n        nsize = xl;\r\n      }\r\n      return {\r\n        height: `${nsize}px`,\r\n        width: `${nsize}px`,\r\n        lineHeight: `${nsize}px`,\r\n        fontSize: `${nsize * 0.6}px`\r\n      };\r\n    } else {\r\n      return {};\r\n    }\r\n  });\r\n  classMap = computed(() => {\r\n    const classMap: XClassMap = {\r\n      [`${XAvatarPrefix}-${this.shape()}`]: !XIsEmpty(this.shape())\r\n    };\r\n    const size = this.size();\r\n    if (XIsString(size)) {\r\n      classMap[`${XAvatarPrefix}-${size}`] = !XIsEmpty(size);\r\n    } else if (XIsObject<XResponseSize>(size)) {\r\n      classMap[`${XAvatarPrefix}-medium`] = true;\r\n    }\r\n\r\n    return classMap;\r\n  });\r\n  labelStyleMap = computed(() => {\r\n    const label = this.label();\r\n    const labelRef = this.labelRef();\r\n    const labelWidth = this.labelWidth();\r\n    if (!label || !this.elementRef || !labelRef || !labelWidth) return {};\r\n    const eleWidth = this.elementRef.nativeElement.clientWidth;\r\n    let scale = (eleWidth - XToCssPx(this.gap(), this.fontSize()) * 2) / labelWidth;\r\n    scale = scale > 1 ? 1 : scale;\r\n    return { transform: `scale(${scale})` };\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => this.documentWidth());\r\n  }\r\n\r\n  ngAfterContentChecked() {\r\n    this.labelWidth.set(this.labelRef()?.nativeElement.clientWidth);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  imgError() {\r\n    this.isImgError.set(true);\r\n  }\r\n}\r\n","<span\r\n  #avatar\r\n  class=\"x-avatar\"\r\n  [class.x-avatar-label]=\"label()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-avatar-error]=\"isImgError()\"\r\n  [ngStyle]=\"styleMap()\"\r\n  [style.backgroundColor]=\"backgroundColor()\"\r\n>\r\n  @if (src() && !isImgError()) {\r\n    <img [src]=\"src()\" [style.object-fit]=\"fit()\" (error)=\"imgError()\" />\r\n  }\r\n  @if (icon()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (isImgError()) {\r\n    <x-icon type=\"fto-image\"></x-icon>\r\n  }\r\n  @if (label()) {\r\n    <span #labelRef [ngStyle]=\"labelStyleMap()\" *xOutlet=\"label(); context: { $label: label() }\">\r\n      {{ label() }}\r\n    </span>\r\n  }\r\n</span>\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XAvatarGroupPrefix, XAvatarGroupProperty } from './avatar.property';\r\n\r\n@Component({\r\n  selector: `${XAvatarGroupPrefix}`,\r\n  standalone: true,\r\n  templateUrl: './avatar-group.component.html',\r\n  styleUrls: ['./avatar-group.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAvatarGroupComponent extends XAvatarGroupProperty {\r\n  @HostBinding('class.x-avatar-group') _has = true;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XAvatarComponent } from './avatar.component';\r\nimport { XAvatarGroupComponent } from './avatar-group.component';\r\n\r\n@NgModule({\r\n  exports: [XAvatarComponent, XAvatarGroupComponent],\r\n  imports: [XAvatarComponent, XAvatarGroupComponent]\r\n})\r\nexport class XAvatarModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}