@libs-ui/components-avatar 0.2.28 → 0.2.30-6.1

package/README.md

@@ -1,3 +1,263 @@
-# avatar
+# Avatar
 
-This library was generated with [Nx](https://nx.dev).
+## Giới thiệu
+
+`avatar` là một component Avatar linh hoạt dùng cho ứng dụng Angular. Component này cho phép hiển thị avatar người dùng với nhiều tùy chọn khác nhau như hình ảnh, chữ cái đầu, màu sắc tự động, và hỗ trợ fallback khi ảnh bị lỗi.
+
+## Tính năng
+
+- Hiển thị hình ảnh avatar người dùng
+- Tự động hiển thị chữ cái đầu khi không có ảnh
+- Tạo màu nền tự động dựa trên ID
+- Hỗ trợ nhiều kích thước khác nhau (16px, 24px, 32px, 40px, 48px, 64px)
+- Hỗ trợ hình dạng khác nhau (tròn, vuông)
+- Xử lý lỗi hình ảnh với nhiều tùy chọn fallback
+- Hỗ trợ tùy chỉnh class CSS
+
+## Cài đặt
+
+### Yêu cầu
+
+- Angular 18.0.0 trở lên
+- Tailwind CSS 3.3.0 trở lên
+
+### Hướng dẫn
+
+Để cài đặt component `avatar`, sử dụng npm hoặc yarn:
+
+```bash
+npm install @libs-ui/components-avatar
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-avatar
+```
+
+## Sử dụng
+
+### Import component
+
+```typescript
+// example.component.ts
+import { Component } from '@angular/core';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsAvatarComponent],
+  template: `
+    <libs_ui-components-avatar
+      [linkAvatar]="'https://example.com/avatar.jpg'"
+      [textAvatar]="'Nguyễn Văn A'"
+      [idGenColor]="'user-123'"
+      [size]="40">
+    </libs_ui-components-avatar>
+  `
+})
+export class ExampleComponent {
+  // Component logic
+}
+```
+
+#### Cách 2: Sử dụng file HTML riêng biệt
+
+```typescript
+// example.component.ts
+import { Component } from '@angular/core';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsAvatarComponent],
+  templateUrl: './example.component.html'
+})
+export class ExampleComponent {
+  // Component logic
+}
+```
+
+```html
+<!-- example.component.html -->
+<libs_ui-components-avatar
+  [linkAvatar]="'https://example.com/avatar.jpg'"
+  [linkAvatarError]="'https://example.com/default-avatar.jpg'"
+  [textAvatar]="'Nguyễn Văn A'"
+  [idGenColor]="'user-123'"
+  [size]="40"
+  [typeShape]="'circle'">
+</libs_ui-components-avatar>
+```
+
+## Công nghệ sử dụng
+
+- **Angular 18**: Sử dụng các tính năng mới nhất của Angular 18 như control flow (@if, @for), standalone components, và signals
+- **Tailwind CSS**: Component được xây dựng với Tailwind CSS 3.3+ để quản lý style
+
+## API Reference
+
+### Inputs
+
+| Tên                | Kiểu dữ liệu                | Mặc định | Mô tả                                                                 |
+|--------------------|-----------------------------|----------|----------------------------------------------------------------------|
+| linkAvatar         | `string`                    | -        | Đường dẫn của hình ảnh avatar                                         |
+| linkAvatarError    | `string`                    | -        | Đường dẫn của hình ảnh thay thế khi avatar chính bị lỗi                |
+| textAvatar         | `string`                    | -        | Văn bản hiển thị khi không có hình ảnh (thường là chữ cái đầu của tên) |
+| idGenColor         | `string`                    | -        | ID dùng để tạo màu nền tự động khi sử dụng văn bản                    |
+| size               | `16 \| 24 \| 32 \| 40 \| 48 \| 64` | `32`     | Kích thước của avatar (tính bằng pixel)                              |
+| typeShape          | `'circle' \| 'rectangle'`  | `'circle'`| Hình dạng của avatar (tròn hoặc vuông)                                |
+| classInclude       | `string`                    | `'mr-[8px]'` | CSS class bổ sung cho container chính                              |
+| classImageInclude  | `string`                    | `''`     | CSS class bổ sung cho thẻ img                                         |
+| getLastTextAfterSpace | `boolean`                | `false`  | Nếu true, chỉ lấy chữ cái đầu tiên của từ cuối cùng trong textAvatar  |
+| clickPreviewImage  | `boolean`                   | `false`  | Cho phép click vào avatar để mở xem ảnh preview                    |
+
+### Outputs
+
+| Tên | Kiểu dữ liệu | Mô tả |
+|-----|--------------|-------|
+| outAvatarError | `void` | Sự kiện được kích hoạt khi linkAvatar bị lỗi và không có linkAvatarError |
+
+### Interfaces
+
+#### IAvatarConfig
+```typescript
+export interface IAvatarConfig {
+  classImageInclude?: string;
+  classInclude?: string;
+  size?: TYPE_SIZE_AVATAR_CONFIG;
+  linkAvatar?: string;
+  linkAvatarError?: string;
+  idGenColor?: string;
+  textAvatar?: string;
+  typeShape?: TYPE_SHAPE_AVATAR;
+  getLastTextAfterSpace?: boolean;
+}
+
+export type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;
+export type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';
+```
+
+## Ví dụ
+
+### Avatar với ảnh và fallback
+
+**TypeScript (user-avatar.component.ts):**
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+
+@Component({
+  selector: 'app-user-avatar',
+  standalone: true,
+  imports: [LibsUiComponentsAvatarComponent],
+  templateUrl: './user-avatar.component.html'
+})
+export class UserAvatarComponent {
+  user = {
+    id: 'user-123',
+    name: 'Nguyễn Văn A',
+    avatar: 'https://example.com/avatar.jpg'
+  };
+
+  handleAvatarError() {
+    console.log('Không thể tải được hình ảnh avatar');
+  }
+}
+```
+
+**HTML (user-avatar.component.html):**
+```html
+<libs_ui-components-avatar
+  [linkAvatar]="user.avatar"
+  [textAvatar]="user.name"
+  [idGenColor]="user.id"
+  [size]="40"
+  (outAvatarError)="handleAvatarError()">
+</libs_ui-components-avatar>
+```
+
+### Nhóm Avatars với kích thước và hình dạng khác nhau
+
+**TypeScript (avatar-group.component.ts):**
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+
+@Component({
+  selector: 'app-avatar-group',
+  standalone: true,
+  imports: [LibsUiComponentsAvatarComponent],
+  templateUrl: './avatar-group.component.html'
+})
+export class AvatarGroupComponent {
+  users = [
+    {
+      id: 'user-1',
+      name: 'Nguyễn Văn A',
+      avatar: 'https://example.com/avatar1.jpg',
+      size: 64
+    },
+    {
+      id: 'user-2',
+      name: 'Trần Thị B',
+      avatar: 'https://example.com/avatar2.jpg',
+      size: 48
+    },
+    {
+      id: 'user-3',
+      name: 'Lê Văn C',
+      avatar: 'https://example.com/avatar3.jpg',
+      size: 32
+    },
+    {
+      id: 'user-4',
+      name: 'Phạm Thị D',
+      avatar: null,
+      size: 24
+    }
+  ];
+}
+```
+
+**HTML (avatar-group.component.html):**
+```html
+<div class="flex items-center space-x-2">
+  @for (user of users; track user.id) {
+    <libs_ui-components-avatar
+      [linkAvatar]="user.avatar"
+      [textAvatar]="user.name"
+      [idGenColor]="user.id"
+      [size]="user.size"
+      [typeShape]="user.id === 'user-4' ? 'rectangle' : 'circle'">
+    </libs_ui-components-avatar>
+  }
+</div>
+```
+
+## Demo
+
+Để xem các ví dụ tương tác về component Avatar, bạn có thể sử dụng `LibsUiComponentsAvatarDemoComponent` trong ứng dụng của mình:
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsAvatarDemoComponent } from '@libs-ui/components-avatar';
+
+@Component({
+  selector: 'app-avatar-demo',
+  standalone: true,
+  imports: [LibsUiComponentsAvatarDemoComponent],
+  template: `
+    <lib-avatar-demo></lib-avatar-demo>
+  `
+})
+export class AvatarDemoComponent {}
+```
+
+Hoặc thêm trực tiếp trong template HTML:
+
+```html
+<lib-avatar-demo></lib-avatar-demo>
+```

package/avatar.component.d.ts

@@ -1,24 +1,34 @@
+import { OnDestroy } from '@angular/core';
 import { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from './interfaces/avatar.interface';
 import * as i0 from "@angular/core";
-export declare class LibsUiComponentsAvatarComponent {
-    protected readonly getLastTextAfterSpace: import("@angular/core").WritableSignal<boolean>;
+export declare class LibsUiComponentsAvatarComponent implements OnDestroy {
     protected isErrorLinkAvatar: import("@angular/core").WritableSignal<boolean>;
     protected isErrorLinkAvatarError: import("@angular/core").WritableSignal<boolean>;
     protected isShowIcon: import("@angular/core").WritableSignal<boolean>;
     protected color: import("@angular/core").Signal<string>;
     protected fontSize: import("@angular/core").Signal<6 | 4 | 3 | 1>;
+    private galleryViewerComponent?;
     readonly typeShape: import("@angular/core").InputSignalWithTransform<TYPE_SHAPE_AVATAR | undefined, TYPE_SHAPE_AVATAR | undefined>;
     readonly classInclude: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
     readonly size: import("@angular/core").InputSignalWithTransform<TYPE_SIZE_AVATAR_CONFIG | undefined, TYPE_SIZE_AVATAR_CONFIG | undefined>;
     readonly linkAvatar: import("@angular/core").InputSignal<string | undefined>;
     readonly linkAvatarError: import("@angular/core").InputSignal<string | undefined>;
+    readonly classImageInclude: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
+    readonly zIndexPreviewImage: import("@angular/core").InputSignal<number | undefined>;
+    readonly clickPreviewImage: import("@angular/core").InputSignal<boolean | undefined>;
     readonly idGenColor: import("@angular/core").InputSignal<string | undefined>;
+    readonly getLastTextAfterSpace: import("@angular/core").InputSignal<boolean | undefined>;
     readonly textAvatar: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
-    readonly classImageInclude: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
+    readonly textAvatarClassInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly containertextAvatarClassInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
     readonly outAvatarError: import("@angular/core").OutputEmitterRef<void>;
+    readonly outEventPreviewImage: import("@angular/core").OutputEmitterRef<"open" | "remove">;
+    private dynamicComponentService;
     constructor();
     protected handlerImageError(e: ErrorEvent): Promise<void>;
+    protected handlerClickImage(): void;
     private fontSizeComputed;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsAvatarComponent, "libs_ui-components-avatar", never, { "typeShape": { "alias": "typeShape"; "required": false; "isSignal": true; }; "classInclude": { "alias": "classInclude"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "linkAvatar": { "alias": "linkAvatar"; "required": false; "isSignal": true; }; "linkAvatarError": { "alias": "linkAvatarError"; "required": false; "isSignal": true; }; "idGenColor": { "alias": "idGenColor"; "required": false; "isSignal": true; }; "textAvatar": { "alias": "textAvatar"; "required": false; "isSignal": true; }; "classImageInclude": { "alias": "classImageInclude"; "required": false; "isSignal": true; }; }, { "outAvatarError": "outAvatarError"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsAvatarComponent, "libs_ui-components-avatar", never, { "typeShape": { "alias": "typeShape"; "required": false; "isSignal": true; }; "classInclude": { "alias": "classInclude"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "linkAvatar": { "alias": "linkAvatar"; "required": false; "isSignal": true; }; "linkAvatarError": { "alias": "linkAvatarError"; "required": false; "isSignal": true; }; "classImageInclude": { "alias": "classImageInclude"; "required": false; "isSignal": true; }; "zIndexPreviewImage": { "alias": "zIndexPreviewImage"; "required": false; "isSignal": true; }; "clickPreviewImage": { "alias": "clickPreviewImage"; "required": false; "isSignal": true; }; "idGenColor": { "alias": "idGenColor"; "required": false; "isSignal": true; }; "getLastTextAfterSpace": { "alias": "getLastTextAfterSpace"; "required": false; "isSignal": true; }; "textAvatar": { "alias": "textAvatar"; "required": false; "isSignal": true; }; "textAvatarClassInclude": { "alias": "textAvatarClassInclude"; "required": false; "isSignal": true; }; "containertextAvatarClassInclude": { "alias": "containertextAvatarClassInclude"; "required": false; "isSignal": true; }; }, { "outAvatarError": "outAvatarError"; "outEventPreviewImage": "outEventPreviewImage"; }, never, never, true, never>;
 }

package/esm2022/avatar.component.mjs

@@ -1,33 +1,45 @@
-import { Component, computed, effect, input, output, signal, untracked } from '@angular/core';
+import { Component, computed, effect, inject, input, output, signal, untracked } from '@angular/core';
+import { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import { deleteUnicode, getColorById } from '@libs-ui/utils';
 import * as i0 from "@angular/core";
 export class LibsUiComponentsAvatarComponent {
-    /* PROPERTY */
-    getLastTextAfterSpace = signal(false);
+    // #region PROPERTY
     isErrorLinkAvatar = signal(false);
     isErrorLinkAvatarError = signal(false);
     isShowIcon = signal(false);
     color = computed(() => getColorById(this.idGenColor() || ''));
     fontSize = computed(this.fontSizeComputed.bind(this));
-    /* INPUT */
-    typeShape = input('circle', { transform: value => value ?? 'circle' });
+    galleryViewerComponent;
+    // #region INPUT
+    typeShape = input('circle', { transform: (value) => value ?? 'circle' });
     classInclude = input('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });
-    size = input(32, { transform: value => value ?? 32 });
+    size = input(32, { transform: (value) => value ?? 32 });
     linkAvatar = input();
     linkAvatarError = input();
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    zIndexPreviewImage = input();
+    clickPreviewImage = input();
     idGenColor = input();
+    getLastTextAfterSpace = input(); // Lấy text cuối cùng sau khi cắt khoảng trắng. Lưu ý truyền biến này trước khi truyền biến textAvatar
     textAvatar = input('', {
         transform: (value) => {
-            value = deleteUnicode(value || '').replace(/[^a-zA-Z0-9\s]/g, '').trim();
+            value = deleteUnicode(value || '')
+                .replace(/[^a-zA-Z0-9\s]/g, '')
+                .trim();
             if (this.getLastTextAfterSpace()) {
                 value = value.split(' ').pop() || '';
             }
             return value[0] || '—';
-        }
+        },
     });
-    classImageInclude = input('', { transform: (value) => value ?? '' });
-    /* OUTPUT */
+    textAvatarClassInclude = input('', { transform: (value) => value ?? '' });
+    containertextAvatarClassInclude = input('', { transform: (value) => value ?? '' });
+    // #region OUTPUT
     outAvatarError = output();
+    outEventPreviewImage = output();
+    // #region INJECT
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
     constructor() {
         effect(() => {
             this.linkAvatar();
@@ -41,6 +53,7 @@ export class LibsUiComponentsAvatarComponent {
     /* FUNCTIONS */
     async handlerImageError(e) {
         if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {
+            this.outAvatarError.emit();
             this.isShowIcon.set(true);
             return;
         }
@@ -60,6 +73,23 @@ export class LibsUiComponentsAvatarComponent {
         }
         e.target.src = this.linkAvatarError();
     }
+    handlerClickImage() {
+        if (this.galleryViewerComponent || !this.clickPreviewImage()) {
+            return;
+        }
+        this.outEventPreviewImage.emit('open');
+        this.galleryViewerComponent = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsGalleryViewerComponent);
+        this.galleryViewerComponent.setInput('images', [{ imageSrc: this.linkAvatar() }]);
+        this.galleryViewerComponent.setInput('fieldDisplaySrcImage', 'imageSrc');
+        this.galleryViewerComponent.setInput('singleImage', true);
+        this.galleryViewerComponent.setInput('zIndex', this.zIndexPreviewImage());
+        this.galleryViewerComponent.instance.outClose.subscribe(() => {
+            this.dynamicComponentService.remove(this.galleryViewerComponent);
+            this.galleryViewerComponent = undefined;
+            this.outEventPreviewImage.emit('remove');
+        });
+        this.dynamicComponentService.addToBody(this.galleryViewerComponent);
+    }
     /* COMPUTED PROPERTIES FUNCTION */
     fontSizeComputed() {
         if (this.size() === 16 || this.size() === 24) {
@@ -76,11 +106,15 @@ export class LibsUiComponentsAvatarComponent {
         }
         return 4;
     }
+    ngOnDestroy() {
+        this.dynamicComponentService.remove(this.galleryViewerComponent);
+        this.galleryViewerComponent = undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linkAvatar: { classPropertyName: "linkAvatar", publicName: "linkAvatar", isSignal: true, isRequired: false, transformFunction: null }, linkAvatarError: { classPropertyName: "linkAvatarError", publicName: "linkAvatarError", isSignal: true, isRequired: false, transformFunction: null }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", isSignal: true, isRequired: false, transformFunction: null }, textAvatar: { classPropertyName: "textAvatar", publicName: "textAvatar", isSignal: true, isRequired: false, transformFunction: null }, classImageInclude: { classPropertyName: "classImageInclude", publicName: "classImageInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outAvatarError: "outAvatarError" }, ngImport: i0, template: "@if (linkAvatar() || isShowIcon()) {\n  <div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n    [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (linkAvatar() && !isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @if (isShowIcon()) {\n      <div class='libs_ui-component-avatar-icon'\n        [style.background]='color()'>\n        <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s\"\n          [innerHTML]=\"textAvatar()\">\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linkAvatar: { classPropertyName: "linkAvatar", publicName: "linkAvatar", isSignal: true, isRequired: false, transformFunction: null }, linkAvatarError: { classPropertyName: "linkAvatarError", publicName: "linkAvatarError", isSignal: true, isRequired: false, transformFunction: null }, classImageInclude: { classPropertyName: "classImageInclude", publicName: "classImageInclude", isSignal: true, isRequired: false, transformFunction: null }, zIndexPreviewImage: { classPropertyName: "zIndexPreviewImage", publicName: "zIndexPreviewImage", isSignal: true, isRequired: false, transformFunction: null }, clickPreviewImage: { classPropertyName: "clickPreviewImage", publicName: "clickPreviewImage", isSignal: true, isRequired: false, transformFunction: null }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, textAvatar: { classPropertyName: "textAvatar", publicName: "textAvatar", isSignal: true, isRequired: false, transformFunction: null }, textAvatarClassInclude: { classPropertyName: "textAvatarClassInclude", publicName: "textAvatarClassInclude", isSignal: true, isRequired: false, transformFunction: null }, containertextAvatarClassInclude: { classPropertyName: "containertextAvatarClassInclude", publicName: "containertextAvatarClassInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outAvatarError: "outAvatarError", outEventPreviewImage: "outEventPreviewImage" }, ngImport: i0, template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n  [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n  [style.width.px]='size()'\n  [style.height.px]='size()'>\n  @if (!isShowIcon()) {\n    <img [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]='linkAvatar()'\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div class='libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}'\n      [style.background]='color()'>\n      <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\">\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "@if (linkAvatar() || isShowIcon()) {\n  <div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n    [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (linkAvatar() && !isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @if (isShowIcon()) {\n      <div class='libs_ui-component-avatar-icon'\n        [style.background]='color()'>\n        <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s\"\n          [innerHTML]=\"textAvatar()\">\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] }]
+            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n  [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n  [style.width.px]='size()'\n  [style.height.px]='size()'>\n  @if (!isShowIcon()) {\n    <img [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]='linkAvatar()'\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div class='libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}'\n      [style.background]='color()'>\n      <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\">\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RixPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVU3RCxNQUFNLE9BQU8sK0JBQStCO0lBQzFDLGNBQWM7SUFDSyxxQkFBcUIsR0FBRyxNQUFNLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDeEQsaUJBQWlCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNDLHNCQUFzQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoRCxVQUFVLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLEtBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlELFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRWhFLFdBQVc7SUFDRixTQUFTLEdBQUcsS0FBSyxDQUErRCxRQUFRLEVBQUUsRUFBRSxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLElBQUksUUFBUSxFQUFFLENBQUMsQ0FBQztJQUNySSxZQUFZLEdBQUcsS0FBSyxDQUF5QyxVQUFVLEVBQUUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssSUFBSSxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQ3hILElBQUksR0FBRyxLQUFLLENBQTJFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2hJLFVBQVUsR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUM3QixlQUFlLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDbEMsVUFBVSxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQzdCLFVBQVUsR0FBRyxLQUFLLENBQXlDLEVBQUUsRUFBRTtRQUN0RSxTQUFTLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNuQixLQUFLLEdBQUcsYUFBYSxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUM7WUFFekUsSUFBSSxJQUFJLENBQUMscUJBQXFCLEVBQUUsRUFBRSxDQUFDO2dCQUNqQyxLQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFDdkMsQ0FBQztZQUVELE9BQU8sS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLFNBQVMsQ0FBQztRQUMvQixDQUFDO0tBQ0YsQ0FBQyxDQUFDO0lBQ00saUJBQWlCLEdBQUcsS0FBSyxDQUF5QyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRXRILFlBQVk7SUFDSCxjQUFjLEdBQUcsTUFBTSxFQUFRLENBQUM7SUFFekM7UUFDRSxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ1YsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ2xCLFNBQVMsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzNCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ2xDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDekMsQ0FBQyxDQUFDLENBQUE7UUFDSixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxlQUFlO0lBQ0wsS0FBSyxDQUFDLGlCQUFpQixDQUFDLENBQWE7UUFDN0MsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUM7WUFDOUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7WUFFMUIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLENBQUM7WUFDN0IsSUFBSSxDQUFDLHNCQUFzQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUN2QyxDQUFDO1FBQ0QsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVqQyxJQUFJLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLEVBQUUsQ0FBQztZQUM1RSxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUMzQixDQUFDO1FBR0QsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsRUFBRSxDQUFDO1lBQ2xDLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1lBQzVCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7WUFFM0IsT0FBTztRQUNULENBQUM7UUFDQSxDQUFZLENBQUMsTUFBTSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDcEQsQ0FBQztJQUVELGtDQUFrQztJQUMxQixnQkFBZ0I7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUM3QyxPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFDRCxPQUFPLENBQUMsQ0FBQztJQUNYLENBQUM7d0dBekZVLCtCQUErQjs0RkFBL0IsK0JBQStCLDZ0Q0NaNUMscXNCQW9CQTs7NEZEUmEsK0JBQStCO2tCQVAzQyxTQUFTOytCQUVFLDJCQUEyQixjQUV6QixJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBjb21wdXRlZCwgZWZmZWN0LCBpbnB1dCwgb3V0cHV0LCBzaWduYWwsIHVudHJhY2tlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUV2ZW50IH0gZnJvbSAnQGxpYnMtdWkvaW50ZXJmYWNlcy10eXBlcyc7XG5pbXBvcnQgeyBkZWxldGVVbmljb2RlLCBnZXRDb2xvckJ5SWQgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBUWVBFX1NIQVBFX0FWQVRBUiwgVFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfSBmcm9tICcuL2ludGVyZmFjZXMvYXZhdGFyLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0F2YXRhckNvbXBvbmVudCB7XG4gIC8qIFBST1BFUlRZICovXG4gIHByb3RlY3RlZCByZWFkb25seSBnZXRMYXN0VGV4dEFmdGVyU3BhY2UgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXIgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXJFcnJvciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc1Nob3dJY29uID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGNvbG9yID0gY29tcHV0ZWQoKCkgPT4gZ2V0Q29sb3JCeUlkKHRoaXMuaWRHZW5Db2xvcigpIHx8ICcnKSk7XG4gIHByb3RlY3RlZCBmb250U2l6ZSA9IGNvbXB1dGVkKHRoaXMuZm9udFNpemVDb21wdXRlZC5iaW5kKHRoaXMpKTtcblxuICAvKiBJTlBVVCAqL1xuICByZWFkb25seSB0eXBlU2hhcGUgPSBpbnB1dDxUWVBFX1NIQVBFX0FWQVRBUiB8IHVuZGVmaW5lZCwgVFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQ+KCdjaXJjbGUnLCB7IHRyYW5zZm9ybTogdmFsdWUgPT4gdmFsdWUgPz8gJ2NpcmNsZScgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignbXItWzhweF0nLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbXItWzhweF0nIH0pO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8VFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfCB1bmRlZmluZWQsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkPigzMiwgeyB0cmFuc2Zvcm06IHZhbHVlID0+IHZhbHVlID8/IDMyIH0pO1xuICByZWFkb25seSBsaW5rQXZhdGFyID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBsaW5rQXZhdGFyRXJyb3IgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGlkR2VuQ29sb3IgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHRleHRBdmF0YXIgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQsIHN0cmluZyB8IHVuZGVmaW5lZD4oJycsIHtcbiAgICB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4ge1xuICAgICAgdmFsdWUgPSBkZWxldGVVbmljb2RlKHZhbHVlIHx8ICcnKS5yZXBsYWNlKC9bXmEtekEtWjAtOVxcc10vZywgJycpLnRyaW0oKTtcblxuICAgICAgaWYgKHRoaXMuZ2V0TGFzdFRleHRBZnRlclNwYWNlKCkpIHtcbiAgICAgICAgdmFsdWUgPSB2YWx1ZS5zcGxpdCgnICcpLnBvcCgpIHx8ICcnO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gdmFsdWVbMF0gfHwgJyZtZGFzaDsnO1xuICAgIH1cbiAgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW1hZ2VJbmNsdWRlID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcblxuICAvKiBPVVRQVVQgKi9cbiAgcmVhZG9ubHkgb3V0QXZhdGFyRXJyb3IgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5saW5rQXZhdGFyKCk7XG4gICAgICB1bnRyYWNrZWQoKCkgPT4ge1xuICAgICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQoZmFsc2UpO1xuICAgICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KGZhbHNlKTtcbiAgICAgIH0pXG4gICAgfSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJJbWFnZUVycm9yKGU6IEVycm9yRXZlbnQpIHtcbiAgICBpZiAoIXRoaXMubGlua0F2YXRhckVycm9yKCk/LnRyaW0oKSAmJiB0aGlzLmlkR2VuQ29sb3IoKSAmJiB0aGlzLnRleHRBdmF0YXIoKSkge1xuICAgICAgdGhpcy5pc1Nob3dJY29uLnNldCh0cnVlKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KHRydWUpXG4gICAgfVxuICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KHRydWUpO1xuXG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvcigpICYmIHRoaXMuaWRHZW5Db2xvcigpICYmIHRoaXMudGV4dEF2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KHRydWUpXG4gICAgfVxuXG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKCF0aGlzLmxpbmtBdmF0YXJFcnJvcigpKSB7XG4gICAgICB0aGlzLm91dEF2YXRhckVycm9yLmVtaXQoKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICAoZSBhcyBJRXZlbnQpLnRhcmdldC5zcmMgPSB0aGlzLmxpbmtBdmF0YXJFcnJvcigpO1xuICB9XG5cbiAgLyogQ09NUFVURUQgUFJPUEVSVElFUyBGVU5DVElPTiAqL1xuICBwcml2YXRlIGZvbnRTaXplQ29tcHV0ZWQoKSB7XG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSAxNiB8fCB0aGlzLnNpemUoKSA9PT0gMjQpIHtcbiAgICAgIHJldHVybiA2O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gMzIpIHtcbiAgICAgIHJldHVybiA0O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNDApIHtcbiAgICAgIHJldHVybiAzO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNjQpIHtcbiAgICAgIHJldHVybiAxO1xuICAgIH1cbiAgICByZXR1cm4gNDtcbiAgfVxufSIsIkBpZiAobGlua0F2YXRhcigpIHx8IGlzU2hvd0ljb24oKSkge1xuICA8ZGl2IGNsYXNzPVwibGlic191aS1jb21wb25lbnQtYXZhdGFyIHt7IGNsYXNzSW5jbHVkZSgpIH19XCJcbiAgICBbY2xhc3MubGlic191aS1jb21wb25lbnQtYXZhdGFyLXJlY3RhbmdsZV09XCJ0eXBlU2hhcGUoKSA9PT0gJ3JlY3RhbmdsZSdcIlxuICAgIFtzdHlsZS53aWR0aC5weF09J3NpemUoKSdcbiAgICBbc3R5bGUuaGVpZ2h0LnB4XT0nc2l6ZSgpJz5cbiAgICBAaWYgKGxpbmtBdmF0YXIoKSAmJiAhaXNTaG93SWNvbigpKSB7XG4gICAgICA8aW1nIFtjbGFzc109XCJjbGFzc0ltYWdlSW5jbHVkZSgpXCJcbiAgICAgICAgW3NyY109J2xpbmtBdmF0YXIoKSdcbiAgICAgICAgKGVycm9yKT1cImhhbmRsZXJJbWFnZUVycm9yKCRldmVudClcIiAvPlxuICAgIH1cbiAgICBAaWYgKGlzU2hvd0ljb24oKSkge1xuICAgICAgPGRpdiBjbGFzcz0nbGlic191aS1jb21wb25lbnQtYXZhdGFyLWljb24nXG4gICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT0nY29sb3IoKSc+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ1cHBlcmNhc2UgdGV4dC1bI2ZmZmZmZl0gbGlicy11aS1mb250LWh7eyBmb250U2l6ZSgpIH19c1wiXG4gICAgICAgICAgW2lubmVySFRNTF09XCJ0ZXh0QXZhdGFyKClcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9ILE9BQU8sRUFBRSxzQ0FBc0MsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXJGLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBVTdELE1BQU0sT0FBTywrQkFBK0I7SUFDMUMsbUJBQW1CO0lBQ1QsaUJBQWlCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNDLHNCQUFzQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoRCxVQUFVLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLEtBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlELFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRXhELHNCQUFzQixDQUF3RDtJQUV0RixnQkFBZ0I7SUFDUCxTQUFTLEdBQUcsS0FBSyxDQUErRCxRQUFRLEVBQUUsRUFBRSxTQUFTLEVB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Q1gsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxDQUFDO1FBQ1gsQ0FBQztRQUNELE9BQU8sQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxTQUFTLENBQUM7SUFDMUMsQ0FBQzt3R0E3SFUsK0JBQStCOzRGQUEvQiwrQkFBK0IsK2xFQ2Q1Qyxxd0JBa0JBOzs0RkRKYSwrQkFBK0I7a0JBUDNDLFNBQVM7K0JBRUUsMkJBQTJCLGNBRXpCLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbXBvbmVudFJlZiwgY29tcHV0ZWQsIGVmZmVjdCwgaW5qZWN0LCBpbnB1dCwgT25EZXN0cm95LCBvdXRwdXQsIHNpZ25hbCwgdW50cmFja2VkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtZ2FsbGVyeSc7XG5pbXBvcnQgeyBJRXZlbnQgfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcbmltcG9ydCB7IExpYnNVaUR5bmFtaWNDb21wb25lbnRTZXJ2aWNlIH0gZnJvbSAnQGxpYnMtdWkvc2VydmljZXMtZHluYW1pYy1jb21wb25lbnQnO1xuaW1wb3J0IHsgZGVsZXRlVW5pY29kZSwgZ2V0Q29sb3JCeUlkIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgVFlQRV9TSEFQRV9BVkFUQVIsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2F2YXRhci5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2F2YXRhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgLy8gI3JlZ2lvbiBQUk9QRVJUWVxuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXIgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXJFcnJvciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc1Nob3dJY29uID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGNvbG9yID0gY29tcHV0ZWQoKCkgPT4gZ2V0Q29sb3JCeUlkKHRoaXMuaWRHZW5Db2xvcigpIHx8ICcnKSk7XG4gIHByb3RlY3RlZCBmb250U2l6ZSA9IGNvbXB1dGVkKHRoaXMuZm9udFNpemVDb21wdXRlZC5iaW5kKHRoaXMpKTtcblxuICBwcml2YXRlIGdhbGxlcnlWaWV3ZXJDb21wb25lbnQ/OiBDb21wb25lbnRSZWY8TGlic1VpQ29tcG9uZW50c0dhbGxlcnlWaWV3ZXJDb21wb25lbnQ+O1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgdHlwZVNoYXBlID0gaW5wdXQ8VFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQsIFRZUEVfU0hBUEVfQVZBVEFSIHwgdW5kZWZpbmVkPignY2lyY2xlJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJ2NpcmNsZScgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignbXItWzhweF0nLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbXItWzhweF0nIH0pO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8VFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfCB1bmRlZmluZWQsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkPigzMiwgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gMzIgfSk7XG4gIHJlYWRvbmx5IGxpbmtBdmF0YXIgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGxpbmtBdmF0YXJFcnJvciA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgY2xhc3NJbWFnZUluY2x1ZGUgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQsIHN0cmluZyB8IHVuZGVmaW5lZD4oJycsIHsgdHJhbnNmb3JtOiAodmFsdWUpID0+IHZhbHVlID8/ICcnIH0pO1xuICByZWFkb25seSB6SW5kZXhQcmV2aWV3SW1hZ2UgPSBpbnB1dDxudW1iZXI+KCk7XG4gIHJlYWRvbmx5IGNsaWNrUHJldmlld0ltYWdlID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgaWRHZW5Db2xvciA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgZ2V0TGFzdFRleHRBZnRlclNwYWNlID0gaW5wdXQ8Ym9vbGVhbj4oKTsgLy8gTOG6pXkgdGV4dCBjdeG7kWkgY8O5bmcgc2F1IGtoaSBj4bqvdCBraG/huqNuZyB0cuG6r25nLiBMxrB1IMO9IHRydXnhu4FuIGJp4bq/biBuw6B5IHRyxrDhu5tjIGtoaSB0cnV54buBbiBiaeG6v24gdGV4dEF2YXRhclxuICByZWFkb25seSB0ZXh0QXZhdGFyID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7XG4gICAgdHJhbnNmb3JtOiAodmFsdWUpID0+IHtcbiAgICAgIHZhbHVlID0gZGVsZXRlVW5pY29kZSh2YWx1ZSB8fCAnJylcbiAgICAgICAgLnJlcGxhY2UoL1teYS16QS1aMC05XFxzXS9nLCAnJylcbiAgICAgICAgLnRyaW0oKTtcblxuICAgICAgaWYgKHRoaXMuZ2V0TGFzdFRleHRBZnRlclNwYWNlKCkpIHtcbiAgICAgICAgdmFsdWUgPSB2YWx1ZS5zcGxpdCgnICcpLnBvcCgpIHx8ICcnO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gdmFsdWVbMF0gfHwgJyZtZGFzaDsnO1xuICAgIH0sXG4gIH0pO1xuICByZWFkb25seSB0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlID0gaW5wdXQ8c3RyaW5nLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcbiAgcmVhZG9ubHkgY29udGFpbmVydGV4dEF2YXRhckNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZywgc3RyaW5nIHwgdW5kZWZpbmVkPignJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJycgfSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0QXZhdGFyRXJyb3IgPSBvdXRwdXQ8dm9pZD4oKTtcbiAgcmVhZG9ubHkgb3V0RXZlbnRQcmV2aWV3SW1hZ2UgPSBvdXRwdXQ8J29wZW4nIHwgJ3JlbW92ZSc+KCk7XG5cbiAgLy8gI3JlZ2lvbiBJTkpFQ1RcbiAgcHJpdmF0ZSBkeW5hbWljQ29tcG9uZW50U2VydmljZSA9IGluamVjdChMaWJzVWlEeW5hbWljQ29tcG9uZW50U2VydmljZSk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMubGlua0F2YXRhcigpO1xuICAgICAgdW50cmFja2VkKCgpID0+IHtcbiAgICAgICAgdGhpcy5pc1Nob3dJY29uLnNldChmYWxzZSk7XG4gICAgICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yLnNldChmYWxzZSk7XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIC8qIEZVTkNUSU9OUyAqL1xuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckltYWdlRXJyb3IoZTogRXJyb3JFdmVudCkge1xuICAgIGlmICghdGhpcy5saW5rQXZhdGFyRXJyb3IoKT8udHJpbSgpICYmIHRoaXMuaWRHZW5Db2xvcigpICYmIHRoaXMudGV4dEF2YXRhcigpKSB7XG4gICAgICB0aGlzLm91dEF2YXRhckVycm9yLmVtaXQoKTtcbiAgICAgIHRoaXMuaXNTaG93SWNvbi5zZXQodHJ1ZSk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXIoKSkge1xuICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yLnNldCh0cnVlKTtcbiAgICB9XG4gICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQodHJ1ZSk7XG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkgJiYgdGhpcy5pZEdlbkNvbG9yKCkgJiYgdGhpcy50ZXh0QXZhdGFyKCkpIHtcbiAgICAgIHRoaXMuaXNTaG93SWNvbi5zZXQodHJ1ZSk7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvcigpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICghdGhpcy5saW5rQXZhdGFyRXJyb3IoKSkge1xuICAgICAgdGhpcy5vdXRBdmF0YXJFcnJvci5lbWl0KCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgKGUgYXMgSUV2ZW50KS50YXJnZXQuc3JjID0gdGhpcy5saW5rQXZhdGFyRXJyb3IoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ2xpY2tJbWFnZSgpIHtcbiAgICBpZiAodGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50IHx8ICF0aGlzLmNsaWNrUHJldmlld0ltYWdlKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5vdXRFdmVudFByZXZpZXdJbWFnZS5lbWl0KCdvcGVuJyk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50ID0gdGhpcy5keW5hbWljQ29tcG9uZW50U2VydmljZS5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCdpbWFnZXMnLCBbeyBpbWFnZVNyYzogdGhpcy5saW5rQXZhdGFyKCkgfV0pO1xuICAgIHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudC5zZXRJbnB1dCgnZmllbGREaXNwbGF5U3JjSW1hZ2UnLCAnaW1hZ2VTcmMnKTtcbiAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQuc2V0SW5wdXQoJ3NpbmdsZUltYWdlJywgdHJ1ZSk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCd6SW5kZXgnLCB0aGlzLnpJbmRleFByZXZpZXdJbWFnZSgpKTtcbiAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQuaW5zdGFuY2Uub3V0Q2xvc2Uuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuZHluYW1pY0NvbXBvbmVudFNlcnZpY2UucmVtb3ZlKHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQgPSB1bmRlZmluZWQ7XG4gICAgICB0aGlzLm91dEV2ZW50UHJldmlld0ltYWdlLmVtaXQoJ3JlbW92ZScpO1xuICAgIH0pO1xuXG4gICAgdGhpcy5keW5hbWljQ29tcG9uZW50U2VydmljZS5hZGRUb0JvZHkodGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50KTtcbiAgfVxuXG4gIC8qIENPTVBVVEVEIFBST1BFUlRJRVMgRlVOQ1RJT04gKi9cbiAgcHJpdmF0ZSBmb250U2l6ZUNvbXB1dGVkKCkge1xuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gMTYgfHwgdGhpcy5zaXplKCkgPT09IDI0KSB7XG4gICAgICByZXR1cm4gNjtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDMyKSB7XG4gICAgICByZXR1cm4gNDtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDQwKSB7XG4gICAgICByZXR1cm4gMztcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDY0KSB7XG4gICAgICByZXR1cm4gMTtcbiAgICB9XG4gICAgcmV0dXJuIDQ7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmR5bmFtaWNDb21wb25lbnRTZXJ2aWNlLnJlbW92ZSh0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQpO1xuICAgIHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCA9IHVuZGVmaW5lZDtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImxpYnNfdWktY29tcG9uZW50LWF2YXRhciB7eyBjbGFzc0luY2x1ZGUoKSB9fVwiXG4gIFtjbGFzcy5saWJzX3VpLWNvbXBvbmVudC1hdmF0YXItcmVjdGFuZ2xlXT1cInR5cGVTaGFwZSgpID09PSAncmVjdGFuZ2xlJ1wiXG4gIFtzdHlsZS53aWR0aC5weF09J3NpemUoKSdcbiAgW3N0eWxlLmhlaWdodC5weF09J3NpemUoKSc+XG4gIEBpZiAoIWlzU2hvd0ljb24oKSkge1xuICAgIDxpbWcgW2NsYXNzXT1cImNsYXNzSW1hZ2VJbmNsdWRlKCkgKyAoY2xpY2tQcmV2aWV3SW1hZ2UoKSA/ICcgY3Vyc29yLXBvaW50ZXInIDogJ2N1cnNvci1kZWZhdWx0JylcIlxuICAgICAgW3NyY109J2xpbmtBdmF0YXIoKSdcbiAgICAgIChlcnJvcik9XCJoYW5kbGVySW1hZ2VFcnJvcigkZXZlbnQpXCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVyQ2xpY2tJbWFnZSgpXCIgLz5cbiAgfSBAZWxzZSB7XG4gICAgPGRpdiBjbGFzcz0nbGlic191aS1jb21wb25lbnQtYXZhdGFyLWljb24ge3sgY29udGFpbmVydGV4dEF2YXRhckNsYXNzSW5jbHVkZSgpIH19J1xuICAgICAgW3N0eWxlLmJhY2tncm91bmRdPSdjb2xvcigpJz5cbiAgICAgIDxkaXYgY2xhc3M9XCJ1cHBlcmNhc2UgdGV4dC1bI2ZmZmZmZl0gbGlicy11aS1mb250LWh7eyBmb250U2l6ZSgpIH19cyB7eyB0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlKCkgfX1cIlxuICAgICAgICBbaW5uZXJIVE1MXT1cInRleHRBdmF0YXIoKVwiPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIH1cbjwvZGl2PlxuIl19

package/fesm2022/libs-ui-components-avatar.mjs

@@ -1,34 +1,46 @@
 import * as i0 from '@angular/core';
-import { signal, computed, input, output, effect, untracked, Component } from '@angular/core';
+import { signal, computed, input, output, inject, effect, untracked, Component } from '@angular/core';
+import { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import { getColorById, deleteUnicode } from '@libs-ui/utils';
 
 class LibsUiComponentsAvatarComponent {
-    /* PROPERTY */
-    getLastTextAfterSpace = signal(false);
+    // #region PROPERTY
     isErrorLinkAvatar = signal(false);
     isErrorLinkAvatarError = signal(false);
     isShowIcon = signal(false);
     color = computed(() => getColorById(this.idGenColor() || ''));
     fontSize = computed(this.fontSizeComputed.bind(this));
-    /* INPUT */
-    typeShape = input('circle', { transform: value => value ?? 'circle' });
+    galleryViewerComponent;
+    // #region INPUT
+    typeShape = input('circle', { transform: (value) => value ?? 'circle' });
     classInclude = input('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });
-    size = input(32, { transform: value => value ?? 32 });
+    size = input(32, { transform: (value) => value ?? 32 });
     linkAvatar = input();
     linkAvatarError = input();
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    zIndexPreviewImage = input();
+    clickPreviewImage = input();
     idGenColor = input();
+    getLastTextAfterSpace = input(); // Lấy text cuối cùng sau khi cắt khoảng trắng. Lưu ý truyền biến này trước khi truyền biến textAvatar
     textAvatar = input('', {
         transform: (value) => {
-            value = deleteUnicode(value || '').replace(/[^a-zA-Z0-9\s]/g, '').trim();
+            value = deleteUnicode(value || '')
+                .replace(/[^a-zA-Z0-9\s]/g, '')
+                .trim();
             if (this.getLastTextAfterSpace()) {
                 value = value.split(' ').pop() || '';
             }
             return value[0] || '—';
-        }
+        },
     });
-    classImageInclude = input('', { transform: (value) => value ?? '' });
-    /* OUTPUT */
+    textAvatarClassInclude = input('', { transform: (value) => value ?? '' });
+    containertextAvatarClassInclude = input('', { transform: (value) => value ?? '' });
+    // #region OUTPUT
     outAvatarError = output();
+    outEventPreviewImage = output();
+    // #region INJECT
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
     constructor() {
         effect(() => {
             this.linkAvatar();
@@ -42,6 +54,7 @@ class LibsUiComponentsAvatarComponent {
     /* FUNCTIONS */
     async handlerImageError(e) {
         if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {
+            this.outAvatarError.emit();
             this.isShowIcon.set(true);
             return;
         }
@@ -61,6 +74,23 @@ class LibsUiComponentsAvatarComponent {
         }
         e.target.src = this.linkAvatarError();
     }
+    handlerClickImage() {
+        if (this.galleryViewerComponent || !this.clickPreviewImage()) {
+            return;
+        }
+        this.outEventPreviewImage.emit('open');
+        this.galleryViewerComponent = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsGalleryViewerComponent);
+        this.galleryViewerComponent.setInput('images', [{ imageSrc: this.linkAvatar() }]);
+        this.galleryViewerComponent.setInput('fieldDisplaySrcImage', 'imageSrc');
+        this.galleryViewerComponent.setInput('singleImage', true);
+        this.galleryViewerComponent.setInput('zIndex', this.zIndexPreviewImage());
+        this.galleryViewerComponent.instance.outClose.subscribe(() => {
+            this.dynamicComponentService.remove(this.galleryViewerComponent);
+            this.galleryViewerComponent = undefined;
+            this.outEventPreviewImage.emit('remove');
+        });
+        this.dynamicComponentService.addToBody(this.galleryViewerComponent);
+    }
     /* COMPUTED PROPERTIES FUNCTION */
     fontSizeComputed() {
         if (this.size() === 16 || this.size() === 24) {
@@ -77,12 +107,16 @@ class LibsUiComponentsAvatarComponent {
         }
         return 4;
     }
+    ngOnDestroy() {
+        this.dynamicComponentService.remove(this.galleryViewerComponent);
+        this.galleryViewerComponent = undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linkAvatar: { classPropertyName: "linkAvatar", publicName: "linkAvatar", isSignal: true, isRequired: false, transformFunction: null }, linkAvatarError: { classPropertyName: "linkAvatarError", publicName: "linkAvatarError", isSignal: true, isRequired: false, transformFunction: null }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", isSignal: true, isRequired: false, transformFunction: null }, textAvatar: { classPropertyName: "textAvatar", publicName: "textAvatar", isSignal: true, isRequired: false, transformFunction: null }, classImageInclude: { classPropertyName: "classImageInclude", publicName: "classImageInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outAvatarError: "outAvatarError" }, ngImport: i0, template: "@if (linkAvatar() || isShowIcon()) {\n  <div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n    [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (linkAvatar() && !isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @if (isShowIcon()) {\n      <div class='libs_ui-component-avatar-icon'\n        [style.background]='color()'>\n        <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s\"\n          [innerHTML]=\"textAvatar()\">\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linkAvatar: { classPropertyName: "linkAvatar", publicName: "linkAvatar", isSignal: true, isRequired: false, transformFunction: null }, linkAvatarError: { classPropertyName: "linkAvatarError", publicName: "linkAvatarError", isSignal: true, isRequired: false, transformFunction: null }, classImageInclude: { classPropertyName: "classImageInclude", publicName: "classImageInclude", isSignal: true, isRequired: false, transformFunction: null }, zIndexPreviewImage: { classPropertyName: "zIndexPreviewImage", publicName: "zIndexPreviewImage", isSignal: true, isRequired: false, transformFunction: null }, clickPreviewImage: { classPropertyName: "clickPreviewImage", publicName: "clickPreviewImage", isSignal: true, isRequired: false, transformFunction: null }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, textAvatar: { classPropertyName: "textAvatar", publicName: "textAvatar", isSignal: true, isRequired: false, transformFunction: null }, textAvatarClassInclude: { classPropertyName: "textAvatarClassInclude", publicName: "textAvatarClassInclude", isSignal: true, isRequired: false, transformFunction: null }, containertextAvatarClassInclude: { classPropertyName: "containertextAvatarClassInclude", publicName: "containertextAvatarClassInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outAvatarError: "outAvatarError", outEventPreviewImage: "outEventPreviewImage" }, ngImport: i0, template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n  [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n  [style.width.px]='size()'\n  [style.height.px]='size()'>\n  @if (!isShowIcon()) {\n    <img [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]='linkAvatar()'\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div class='libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}'\n      [style.background]='color()'>\n      <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\">\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "@if (linkAvatar() || isShowIcon()) {\n  <div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n    [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (linkAvatar() && !isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @if (isShowIcon()) {\n      <div class='libs_ui-component-avatar-icon'\n        [style.background]='color()'>\n        <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s\"\n          [innerHTML]=\"textAvatar()\">\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] }]
+            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n  [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n  [style.width.px]='size()'\n  [style.height.px]='size()'>\n  @if (!isShowIcon()) {\n    <img [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]='linkAvatar()'\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div class='libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}'\n      [style.background]='color()'>\n      <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\">\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs_ui-component-avatar{position:relative;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;transition:width .4s,height .4s}.libs_ui-component-avatar-icon,.libs_ui-component-avatar img{border:1px solid #f8f9fa;display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%}.libs_ui-component-avatar-icon{width:100%;height:100%}.libs_ui-component-avatar-rectangle{border-radius:4px}.libs_ui-component-avatar-rectangle-icon,.libs_ui-component-avatar-rectangle img{border:none;border-radius:4px;margin:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/libs-ui-components-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-avatar.mjs","sources":["../../../../../libs-ui/components/avatar/src/avatar.component.ts","../../../../../libs-ui/components/avatar/src/avatar.component.html","../../../../../libs-ui/components/avatar/src/libs-ui-components-avatar.ts"],"sourcesContent":["import { Component, computed, effect, input, output, signal, untracked } from '@angular/core';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { deleteUnicode, getColorById } from '@libs-ui/utils';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from './interfaces/avatar.interface';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-avatar',\n  templateUrl: './avatar.component.html',\n  standalone: true,\n  styleUrls: ['./avatar.component.scss']\n})\nexport class LibsUiComponentsAvatarComponent {\n  /* PROPERTY */\n  protected readonly getLastTextAfterSpace = signal<boolean>(false);\n  protected isErrorLinkAvatar = signal<boolean>(false);\n  protected isErrorLinkAvatarError = signal<boolean>(false);\n  protected isShowIcon = signal<boolean>(false);\n  protected color = computed(() => getColorById(this.idGenColor() || ''));\n  protected fontSize = computed(this.fontSizeComputed.bind(this));\n\n  /* INPUT */\n  readonly typeShape = input<TYPE_SHAPE_AVATAR | undefined, TYPE_SHAPE_AVATAR | undefined>('circle', { transform: value => value ?? 'circle' });\n  readonly classInclude = input<string | undefined, string | undefined>('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });\n  readonly size = input<TYPE_SIZE_AVATAR_CONFIG | undefined, TYPE_SIZE_AVATAR_CONFIG | undefined>(32, { transform: value => value ?? 32 });\n  readonly linkAvatar = input<string>();\n  readonly linkAvatarError = input<string>();\n  readonly idGenColor = input<string>();\n  readonly textAvatar = input<string | undefined, string | undefined>('', {\n    transform: (value) => {\n      value = deleteUnicode(value || '').replace(/[^a-zA-Z0-9\\s]/g, '').trim();\n\n      if (this.getLastTextAfterSpace()) {\n        value = value.split(' ').pop() || '';\n      }\n\n      return value[0] || '&mdash;';\n    }\n  });\n  readonly classImageInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n\n  /* OUTPUT */\n  readonly outAvatarError = output<void>();\n\n  constructor() {\n    effect(() => {\n      this.linkAvatar();\n      untracked(() => {\n        this.isShowIcon.set(false);\n        this.isErrorLinkAvatar.set(false);\n        this.isErrorLinkAvatarError.set(false);\n      })\n    });\n  }\n\n  /* FUNCTIONS */\n  protected async handlerImageError(e: ErrorEvent) {\n    if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {\n      this.isShowIcon.set(true);\n\n      return;\n    }\n    if (this.isErrorLinkAvatar()) {\n      this.isErrorLinkAvatarError.set(true)\n    }\n    this.isErrorLinkAvatar.set(true);\n\n    if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {\n      this.isShowIcon.set(true)\n    }\n\n\n    if (this.isErrorLinkAvatarError()) {\n      return;\n    }\n    if (!this.linkAvatarError()) {\n      this.outAvatarError.emit();\n\n      return;\n    }\n    (e as IEvent).target.src = this.linkAvatarError();\n  }\n\n  /* COMPUTED PROPERTIES FUNCTION */\n  private fontSizeComputed() {\n    if (this.size() === 16 || this.size() === 24) {\n      return 6;\n    }\n\n    if (this.size() === 32) {\n      return 4;\n    }\n\n    if (this.size() === 40) {\n      return 3;\n    }\n\n    if (this.size() === 64) {\n      return 1;\n    }\n    return 4;\n  }\n}","@if (linkAvatar() || isShowIcon()) {\n  <div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n    [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (linkAvatar() && !isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @if (isShowIcon()) {\n      <div class='libs_ui-component-avatar-icon'\n        [style.background]='color()'>\n        <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s\"\n          [innerHTML]=\"textAvatar()\">\n        </div>\n      </div>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"libs-ui-components-avatar.mjs","sources":["../../../../../libs-ui/components/avatar/src/avatar.component.ts","../../../../../libs-ui/components/avatar/src/avatar.component.html","../../../../../libs-ui/components/avatar/src/libs-ui-components-avatar.ts"],"sourcesContent":["import { Component, ComponentRef, computed, effect, inject, input, OnDestroy, output, signal, untracked } from '@angular/core';\nimport { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\nimport { deleteUnicode, getColorById } from '@libs-ui/utils';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from './interfaces/avatar.interface';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-avatar',\n  templateUrl: './avatar.component.html',\n  standalone: true,\n  styleUrls: ['./avatar.component.scss'],\n})\nexport class LibsUiComponentsAvatarComponent implements OnDestroy {\n  // #region PROPERTY\n  protected isErrorLinkAvatar = signal<boolean>(false);\n  protected isErrorLinkAvatarError = signal<boolean>(false);\n  protected isShowIcon = signal<boolean>(false);\n  protected color = computed(() => getColorById(this.idGenColor() || ''));\n  protected fontSize = computed(this.fontSizeComputed.bind(this));\n\n  private galleryViewerComponent?: ComponentRef<LibsUiComponentsGalleryViewerComponent>;\n\n  // #region INPUT\n  readonly typeShape = input<TYPE_SHAPE_AVATAR | undefined, TYPE_SHAPE_AVATAR | undefined>('circle', { transform: (value) => value ?? 'circle' });\n  readonly classInclude = input<string | undefined, string | undefined>('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });\n  readonly size = input<TYPE_SIZE_AVATAR_CONFIG | undefined, TYPE_SIZE_AVATAR_CONFIG | undefined>(32, { transform: (value) => value ?? 32 });\n  readonly linkAvatar = input<string>();\n  readonly linkAvatarError = input<string>();\n  readonly classImageInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n  readonly zIndexPreviewImage = input<number>();\n  readonly clickPreviewImage = input<boolean>();\n  readonly idGenColor = input<string>();\n  readonly getLastTextAfterSpace = input<boolean>(); // Lấy text cuối cùng sau khi cắt khoảng trắng. Lưu ý truyền biến này trước khi truyền biến textAvatar\n  readonly textAvatar = input<string | undefined, string | undefined>('', {\n    transform: (value) => {\n      value = deleteUnicode(value || '')\n        .replace(/[^a-zA-Z0-9\\s]/g, '')\n        .trim();\n\n      if (this.getLastTextAfterSpace()) {\n        value = value.split(' ').pop() || '';\n      }\n\n      return value[0] || '&mdash;';\n    },\n  });\n  readonly textAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n  readonly containertextAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n\n  // #region OUTPUT\n  readonly outAvatarError = output<void>();\n  readonly outEventPreviewImage = output<'open' | 'remove'>();\n\n  // #region INJECT\n  private dynamicComponentService = inject(LibsUiDynamicComponentService);\n\n  constructor() {\n    effect(() => {\n      this.linkAvatar();\n      untracked(() => {\n        this.isShowIcon.set(false);\n        this.isErrorLinkAvatar.set(false);\n        this.isErrorLinkAvatarError.set(false);\n      });\n    });\n  }\n\n  /* FUNCTIONS */\n  protected async handlerImageError(e: ErrorEvent) {\n    if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {\n      this.outAvatarError.emit();\n      this.isShowIcon.set(true);\n\n      return;\n    }\n    if (this.isErrorLinkAvatar()) {\n      this.isErrorLinkAvatarError.set(true);\n    }\n    this.isErrorLinkAvatar.set(true);\n\n    if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {\n      this.isShowIcon.set(true);\n    }\n\n    if (this.isErrorLinkAvatarError()) {\n      return;\n    }\n    if (!this.linkAvatarError()) {\n      this.outAvatarError.emit();\n\n      return;\n    }\n    (e as IEvent).target.src = this.linkAvatarError();\n  }\n\n  protected handlerClickImage() {\n    if (this.galleryViewerComponent || !this.clickPreviewImage()) {\n      return;\n    }\n    this.outEventPreviewImage.emit('open');\n    this.galleryViewerComponent = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsGalleryViewerComponent);\n    this.galleryViewerComponent.setInput('images', [{ imageSrc: this.linkAvatar() }]);\n    this.galleryViewerComponent.setInput('fieldDisplaySrcImage', 'imageSrc');\n    this.galleryViewerComponent.setInput('singleImage', true);\n    this.galleryViewerComponent.setInput('zIndex', this.zIndexPreviewImage());\n    this.galleryViewerComponent.instance.outClose.subscribe(() => {\n      this.dynamicComponentService.remove(this.galleryViewerComponent);\n      this.galleryViewerComponent = undefined;\n      this.outEventPreviewImage.emit('remove');\n    });\n\n    this.dynamicComponentService.addToBody(this.galleryViewerComponent);\n  }\n\n  /* COMPUTED PROPERTIES FUNCTION */\n  private fontSizeComputed() {\n    if (this.size() === 16 || this.size() === 24) {\n      return 6;\n    }\n\n    if (this.size() === 32) {\n      return 4;\n    }\n\n    if (this.size() === 40) {\n      return 3;\n    }\n\n    if (this.size() === 64) {\n      return 1;\n    }\n    return 4;\n  }\n\n  ngOnDestroy(): void {\n    this.dynamicComponentService.remove(this.galleryViewerComponent);\n    this.galleryViewerComponent = undefined;\n  }\n}\n","<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n  [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n  [style.width.px]='size()'\n  [style.height.px]='size()'>\n  @if (!isShowIcon()) {\n    <img [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]='linkAvatar()'\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div class='libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}'\n      [style.background]='color()'>\n      <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\">\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@libs-ui/components-avatar",
-  "version": "0.2.28",
+  "version": "0.2.306.1",
   "peerDependencies": {
-    "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.0"
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/interfaces-types": "0.2.306.1",
+    "@libs-ui/utils": "0.2.306.1"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-avatar.mjs",