@libs-ui/components-avatar 0.1.1-1

package/README.md

@@ -0,0 +1,264 @@
+# Avatar
+
+## 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

@@ -0,0 +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 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 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; }; "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

@@ -0,0 +1,120 @@
+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 {
+    // #region PROPERTY
+    isErrorLinkAvatar = signal(false);
+    isErrorLinkAvatarError = signal(false);
+    isShowIcon = signal(false);
+    color = computed(() => getColorById(this.idGenColor() || ''));
+    fontSize = computed(this.fontSizeComputed.bind(this));
+    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 });
+    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();
+            if (this.getLastTextAfterSpace()) {
+                value = value.split(' ').pop() || '';
+            }
+            return value[0] || '—';
+        },
+    });
+    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();
+            untracked(() => {
+                this.isShowIcon.set(false);
+                this.isErrorLinkAvatar.set(false);
+                this.isErrorLinkAvatarError.set(false);
+            });
+        });
+    }
+    /* FUNCTIONS */
+    async handlerImageError(e) {
+        if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {
+            this.outAvatarError.emit();
+            this.isShowIcon.set(true);
+            return;
+        }
+        if (this.isErrorLinkAvatar()) {
+            this.isErrorLinkAvatarError.set(true);
+        }
+        this.isErrorLinkAvatar.set(true);
+        if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {
+            this.isShowIcon.set(true);
+        }
+        if (this.isErrorLinkAvatarError()) {
+            return;
+        }
+        if (!this.linkAvatarError()) {
+            this.outAvatarError.emit();
+            return;
+        }
+        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) {
+            return 6;
+        }
+        if (this.size() === 32) {
+            return 4;
+        }
+        if (this.size() === 40) {
+            return 3;
+        }
+        if (this.size() === 64) {
+            return 1;
+        }
+        return 4;
+    }
+    ngOnDestroy() {
+        this.dynamicComponentService.remove(this.galleryViewerComponent);
+        this.galleryViewerComponent = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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\n  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\n      [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]=\"linkAvatar()\"\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div\n      class=\"libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}\"\n      [style.background]=\"color()\">\n      <div\n        class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\"></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.14", ngImport: i0, type: LibsUiComponentsAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "<div\n  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\n      [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]=\"linkAvatar()\"\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div\n      class=\"libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}\"\n      [style.background]=\"color()\">\n      <div\n        class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\"></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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9ILE9BQU8sRUFBRSxzQ0FBc0MsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXJGLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBVTdELE1BQU0sT0FBTywrQkFBK0I7SUFDMUMsbUJBQW1CO0lBQ1QsaUJBQWlCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNDLHNCQUFzQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoRCxVQUFVLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLEtBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlELFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRXhELHNCQUFzQixDQUF3RDtJQUV0RixnQkFBZ0I7SUFDUCxTQUFTLEdBQUcsS0FBSyxDQUErRCxRQUFRLEVBQUUsRUFBRSxTQUFTLEVB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Q1gsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxDQUFDO1FBQ1gsQ0FBQztRQUNELE9BQU8sQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxTQUFTLENBQUM7SUFDMUMsQ0FBQzt3R0E3SFUsK0JBQStCOzRGQUEvQiwrQkFBK0IsK2xFQ2Q1QyxpeUJBcUJBOzs0RkRQYSwrQkFBK0I7a0JBUDNDLFNBQVM7K0JBRUUsMkJBQTJCLGNBRXpCLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbXBvbmVudFJlZiwgY29tcHV0ZWQsIGVmZmVjdCwgaW5qZWN0LCBpbnB1dCwgT25EZXN0cm95LCBvdXRwdXQsIHNpZ25hbCwgdW50cmFja2VkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtZ2FsbGVyeSc7XG5pbXBvcnQgeyBJRXZlbnQgfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcbmltcG9ydCB7IExpYnNVaUR5bmFtaWNDb21wb25lbnRTZXJ2aWNlIH0gZnJvbSAnQGxpYnMtdWkvc2VydmljZXMtZHluYW1pYy1jb21wb25lbnQnO1xuaW1wb3J0IHsgZGVsZXRlVW5pY29kZSwgZ2V0Q29sb3JCeUlkIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgVFlQRV9TSEFQRV9BVkFUQVIsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2F2YXRhci5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2F2YXRhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgLy8gI3JlZ2lvbiBQUk9QRVJUWVxuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXIgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXJFcnJvciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc1Nob3dJY29uID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGNvbG9yID0gY29tcHV0ZWQoKCkgPT4gZ2V0Q29sb3JCeUlkKHRoaXMuaWRHZW5Db2xvcigpIHx8ICcnKSk7XG4gIHByb3RlY3RlZCBmb250U2l6ZSA9IGNvbXB1dGVkKHRoaXMuZm9udFNpemVDb21wdXRlZC5iaW5kKHRoaXMpKTtcblxuICBwcml2YXRlIGdhbGxlcnlWaWV3ZXJDb21wb25lbnQ/OiBDb21wb25lbnRSZWY8TGlic1VpQ29tcG9uZW50c0dhbGxlcnlWaWV3ZXJDb21wb25lbnQ+O1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgdHlwZVNoYXBlID0gaW5wdXQ8VFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQsIFRZUEVfU0hBUEVfQVZBVEFSIHwgdW5kZWZpbmVkPignY2lyY2xlJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJ2NpcmNsZScgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignbXItWzhweF0nLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbXItWzhweF0nIH0pO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8VFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfCB1bmRlZmluZWQsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkPigzMiwgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gMzIgfSk7XG4gIHJlYWRvbmx5IGxpbmtBdmF0YXIgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGxpbmtBdmF0YXJFcnJvciA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgY2xhc3NJbWFnZUluY2x1ZGUgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQsIHN0cmluZyB8IHVuZGVmaW5lZD4oJycsIHsgdHJhbnNmb3JtOiAodmFsdWUpID0+IHZhbHVlID8/ICcnIH0pO1xuICByZWFkb25seSB6SW5kZXhQcmV2aWV3SW1hZ2UgPSBpbnB1dDxudW1iZXI+KCk7XG4gIHJlYWRvbmx5IGNsaWNrUHJldmlld0ltYWdlID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgaWRHZW5Db2xvciA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgZ2V0TGFzdFRleHRBZnRlclNwYWNlID0gaW5wdXQ8Ym9vbGVhbj4oKTsgLy8gTOG6pXkgdGV4dCBjdeG7kWkgY8O5bmcgc2F1IGtoaSBj4bqvdCBraG/huqNuZyB0cuG6r25nLiBMxrB1IMO9IHRydXnhu4FuIGJp4bq/biBuw6B5IHRyxrDhu5tjIGtoaSB0cnV54buBbiBiaeG6v24gdGV4dEF2YXRhclxuICByZWFkb25seSB0ZXh0QXZhdGFyID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7XG4gICAgdHJhbnNmb3JtOiAodmFsdWUpID0+IHtcbiAgICAgIHZhbHVlID0gZGVsZXRlVW5pY29kZSh2YWx1ZSB8fCAnJylcbiAgICAgICAgLnJlcGxhY2UoL1teYS16QS1aMC05XFxzXS9nLCAnJylcbiAgICAgICAgLnRyaW0oKTtcblxuICAgICAgaWYgKHRoaXMuZ2V0TGFzdFRleHRBZnRlclNwYWNlKCkpIHtcbiAgICAgICAgdmFsdWUgPSB2YWx1ZS5zcGxpdCgnICcpLnBvcCgpIHx8ICcnO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gdmFsdWVbMF0gfHwgJyZtZGFzaDsnO1xuICAgIH0sXG4gIH0pO1xuICByZWFkb25seSB0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlID0gaW5wdXQ8c3RyaW5nLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcbiAgcmVhZG9ubHkgY29udGFpbmVydGV4dEF2YXRhckNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZywgc3RyaW5nIHwgdW5kZWZpbmVkPignJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJycgfSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0QXZhdGFyRXJyb3IgPSBvdXRwdXQ8dm9pZD4oKTtcbiAgcmVhZG9ubHkgb3V0RXZlbnRQcmV2aWV3SW1hZ2UgPSBvdXRwdXQ8J29wZW4nIHwgJ3JlbW92ZSc+KCk7XG5cbiAgLy8gI3JlZ2lvbiBJTkpFQ1RcbiAgcHJpdmF0ZSBkeW5hbWljQ29tcG9uZW50U2VydmljZSA9IGluamVjdChMaWJzVWlEeW5hbWljQ29tcG9uZW50U2VydmljZSk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMubGlua0F2YXRhcigpO1xuICAgICAgdW50cmFja2VkKCgpID0+IHtcbiAgICAgICAgdGhpcy5pc1Nob3dJY29uLnNldChmYWxzZSk7XG4gICAgICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yLnNldChmYWxzZSk7XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIC8qIEZVTkNUSU9OUyAqL1xuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckltYWdlRXJyb3IoZTogRXJyb3JFdmVudCkge1xuICAgIGlmICghdGhpcy5saW5rQXZhdGFyRXJyb3IoKT8udHJpbSgpICYmIHRoaXMuaWRHZW5Db2xvcigpICYmIHRoaXMudGV4dEF2YXRhcigpKSB7XG4gICAgICB0aGlzLm91dEF2YXRhckVycm9yLmVtaXQoKTtcbiAgICAgIHRoaXMuaXNTaG93SWNvbi5zZXQodHJ1ZSk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXIoKSkge1xuICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yLnNldCh0cnVlKTtcbiAgICB9XG4gICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQodHJ1ZSk7XG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkgJiYgdGhpcy5pZEdlbkNvbG9yKCkgJiYgdGhpcy50ZXh0QXZhdGFyKCkpIHtcbiAgICAgIHRoaXMuaXNTaG93SWNvbi5zZXQodHJ1ZSk7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvcigpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICghdGhpcy5saW5rQXZhdGFyRXJyb3IoKSkge1xuICAgICAgdGhpcy5vdXRBdmF0YXJFcnJvci5lbWl0KCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgKGUgYXMgSUV2ZW50KS50YXJnZXQuc3JjID0gdGhpcy5saW5rQXZhdGFyRXJyb3IoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ2xpY2tJbWFnZSgpIHtcbiAgICBpZiAodGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50IHx8ICF0aGlzLmNsaWNrUHJldmlld0ltYWdlKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5vdXRFdmVudFByZXZpZXdJbWFnZS5lbWl0KCdvcGVuJyk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50ID0gdGhpcy5keW5hbWljQ29tcG9uZW50U2VydmljZS5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCdpbWFnZXMnLCBbeyBpbWFnZVNyYzogdGhpcy5saW5rQXZhdGFyKCkgfV0pO1xuICAgIHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudC5zZXRJbnB1dCgnZmllbGREaXNwbGF5U3JjSW1hZ2UnLCAnaW1hZ2VTcmMnKTtcbiAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQuc2V0SW5wdXQoJ3NpbmdsZUltYWdlJywgdHJ1ZSk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCd6SW5kZXgnLCB0aGlzLnpJbmRleFByZXZpZXdJbWFnZSgpKTtcbiAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQuaW5zdGFuY2Uub3V0Q2xvc2Uuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuZHluYW1pY0NvbXBvbmVudFNlcnZpY2UucmVtb3ZlKHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQgPSB1bmRlZmluZWQ7XG4gICAgICB0aGlzLm91dEV2ZW50UHJldmlld0ltYWdlLmVtaXQoJ3JlbW92ZScpO1xuICAgIH0pO1xuXG4gICAgdGhpcy5keW5hbWljQ29tcG9uZW50U2VydmljZS5hZGRUb0JvZHkodGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50KTtcbiAgfVxuXG4gIC8qIENPTVBVVEVEIFBST1BFUlRJRVMgRlVOQ1RJT04gKi9cbiAgcHJpdmF0ZSBmb250U2l6ZUNvbXB1dGVkKCkge1xuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gMTYgfHwgdGhpcy5zaXplKCkgPT09IDI0KSB7XG4gICAgICByZXR1cm4gNjtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDMyKSB7XG4gICAgICByZXR1cm4gNDtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDQwKSB7XG4gICAgICByZXR1cm4gMztcbiAgICB9XG5cbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDY0KSB7XG4gICAgICByZXR1cm4gMTtcbiAgICB9XG4gICAgcmV0dXJuIDQ7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmR5bmFtaWNDb21wb25lbnRTZXJ2aWNlLnJlbW92ZSh0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQpO1xuICAgIHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCA9IHVuZGVmaW5lZDtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImxpYnNfdWktY29tcG9uZW50LWF2YXRhciB7eyBjbGFzc0luY2x1ZGUoKSB9fVwiXG4gIFtjbGFzcy5saWJzX3VpLWNvbXBvbmVudC1hdmF0YXItcmVjdGFuZ2xlXT1cInR5cGVTaGFwZSgpID09PSAncmVjdGFuZ2xlJ1wiXG4gIFtzdHlsZS53aWR0aC5weF09XCJzaXplKClcIlxuICBbc3R5bGUuaGVpZ2h0LnB4XT1cInNpemUoKVwiPlxuICBAaWYgKCFpc1Nob3dJY29uKCkpIHtcbiAgICA8aW1nXG4gICAgICBbY2xhc3NdPVwiY2xhc3NJbWFnZUluY2x1ZGUoKSArIChjbGlja1ByZXZpZXdJbWFnZSgpID8gJyBjdXJzb3ItcG9pbnRlcicgOiAnY3Vyc29yLWRlZmF1bHQnKVwiXG4gICAgICBbc3JjXT1cImxpbmtBdmF0YXIoKVwiXG4gICAgICAoZXJyb3IpPVwiaGFuZGxlckltYWdlRXJyb3IoJGV2ZW50KVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlckNsaWNrSW1hZ2UoKVwiIC8+XG4gIH0gQGVsc2Uge1xuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwibGlic191aS1jb21wb25lbnQtYXZhdGFyLWljb24ge3sgY29udGFpbmVydGV4dEF2YXRhckNsYXNzSW5jbHVkZSgpIH19XCJcbiAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImNvbG9yKClcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJ1cHBlcmNhc2UgdGV4dC1bI2ZmZmZmZl0gbGlicy11aS1mb250LWh7eyBmb250U2l6ZSgpIH19cyB7eyB0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlKCkgfX1cIlxuICAgICAgICBbaW5uZXJIVE1MXT1cInRleHRBdmF0YXIoKVwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==

package/esm2022/index.mjs

@@ -0,0 +1,3 @@
+export * from './avatar.component';
+export * from './interfaces';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9hdmF0YXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcyc7XG4iXX0=

package/esm2022/interfaces/avatar.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2ludGVyZmFjZXMvYXZhdGFyLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJQXZhdGFyQ29uZmlnIHtcbiAgY2xhc3NJbWFnZUluY2x1ZGU/OiBzdHJpbmc7XG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgc2l6ZT86IFRZUEVfU0laRV9BVkFUQVJfQ09ORklHO1xuICBsaW5rQXZhdGFyPzogc3RyaW5nO1xuICBsaW5rQXZhdGFyRXJyb3I/OiBzdHJpbmc7XG4gIGlkR2VuQ29sb3I/OiBzdHJpbmc7XG4gIHRleHRBdmF0YXI/OiBzdHJpbmc7XG4gIHR5cGVTaGFwZT86IFRZUEVfU0hBUEVfQVZBVEFSO1xuICBnZXRMYXN0VGV4dEFmdGVyU3BhY2U/OiBib29sZWFuO1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRyA9IDE2IHwgMjQgfCAzMiB8IDQwIHwgNDggfCA2NDtcbmV4cG9ydCB0eXBlIFRZUEVfU0hBUEVfQVZBVEFSID0gJ2NpcmNsZScgfCAncmVjdGFuZ2xlJztcbiJdfQ==

package/esm2022/interfaces/index.mjs

@@ -0,0 +1,2 @@
+export * from './avatar.interface';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9pbnRlcmZhY2VzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2F2YXRhci5pbnRlcmZhY2UnO1xuIl19

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

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWF2YXRhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2xpYnMtdWktY29tcG9uZW50cy1hdmF0YXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

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

@@ -0,0 +1,127 @@
+import * as i0 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 {
+    // #region PROPERTY
+    isErrorLinkAvatar = signal(false);
+    isErrorLinkAvatarError = signal(false);
+    isShowIcon = signal(false);
+    color = computed(() => getColorById(this.idGenColor() || ''));
+    fontSize = computed(this.fontSizeComputed.bind(this));
+    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 });
+    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();
+            if (this.getLastTextAfterSpace()) {
+                value = value.split(' ').pop() || '';
+            }
+            return value[0] || '—';
+        },
+    });
+    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();
+            untracked(() => {
+                this.isShowIcon.set(false);
+                this.isErrorLinkAvatar.set(false);
+                this.isErrorLinkAvatarError.set(false);
+            });
+        });
+    }
+    /* FUNCTIONS */
+    async handlerImageError(e) {
+        if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {
+            this.outAvatarError.emit();
+            this.isShowIcon.set(true);
+            return;
+        }
+        if (this.isErrorLinkAvatar()) {
+            this.isErrorLinkAvatarError.set(true);
+        }
+        this.isErrorLinkAvatar.set(true);
+        if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {
+            this.isShowIcon.set(true);
+        }
+        if (this.isErrorLinkAvatarError()) {
+            return;
+        }
+        if (!this.linkAvatarError()) {
+            this.outAvatarError.emit();
+            return;
+        }
+        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) {
+            return 6;
+        }
+        if (this.size() === 32) {
+            return 4;
+        }
+        if (this.size() === 40) {
+            return 3;
+        }
+        if (this.size() === 64) {
+            return 1;
+        }
+        return 4;
+    }
+    ngOnDestroy() {
+        this.dynamicComponentService.remove(this.galleryViewerComponent);
+        this.galleryViewerComponent = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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\n  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\n      [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]=\"linkAvatar()\"\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div\n      class=\"libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}\"\n      [style.background]=\"color()\">\n      <div\n        class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\"></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.14", ngImport: i0, type: LibsUiComponentsAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-avatar', standalone: true, template: "<div\n  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\n      [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]=\"linkAvatar()\"\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div\n      class=\"libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}\"\n      [style.background]=\"color()\">\n      <div\n        class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\"></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: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsAvatarComponent };
+//# sourceMappingURL=libs-ui-components-avatar.mjs.map

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

@@ -0,0 +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, 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\n  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\n      [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n      [src]=\"linkAvatar()\"\n      (error)=\"handlerImageError($event)\"\n      (click)=\"handlerClickImage()\" />\n  } @else {\n    <div\n      class=\"libs_ui-component-avatar-icon {{ containertextAvatarClassInclude() }}\"\n      [style.background]=\"color()\">\n      <div\n        class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n        [innerHTML]=\"textAvatar()\"></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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar.component';
+export * from './interfaces';

package/interfaces/avatar.interface.d.ts

@@ -0,0 +1,13 @@
+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';

package/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar.interface';

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@libs-ui/components-avatar",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/interfaces-types": "0.1.1-1",
+    "@libs-ui/utils": "0.1.1-1"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-avatar.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-avatar.mjs",
+      "esm": "./esm2022/libs-ui-components-avatar.mjs",
+      "default": "./fesm2022/libs-ui-components-avatar.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}