@libs-ui/components-avatar 0.2.5

package/README.md

@@ -0,0 +1,3 @@
+# avatar
+
+This library was generated with [Nx](https://nx.dev).

package/avatar.component.d.ts

@@ -0,0 +1,24 @@
+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>;
+    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>;
+    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 idGenColor: import("@angular/core").InputSignal<string | undefined>;
+    readonly textAvatar: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
+    readonly classImageInclude: import("@angular/core").InputSignalWithTransform<string | undefined, string | undefined>;
+    readonly outAvatarError: import("@angular/core").OutputEmitterRef<void>;
+    constructor();
+    protected handlerImageError(e: ErrorEvent): Promise<void>;
+    private fontSizeComputed;
+    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>;
+}

package/esm2022/avatar.component.mjs

@@ -0,0 +1,86 @@
+import { Component, computed, effect, input, output, signal, untracked } from '@angular/core';
+import { deleteUnicode, getColorById } from '@libs-ui/utils';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsAvatarComponent {
+    /* PROPERTY */
+    getLastTextAfterSpace = signal(false);
+    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' });
+    classInclude = input('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });
+    size = input(32, { transform: value => value ?? 32 });
+    linkAvatar = input();
+    linkAvatarError = input();
+    idGenColor = input();
+    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] || '—';
+        }
+    });
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    /* OUTPUT */
+    outAvatarError = output();
+    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.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();
+    }
+    /* 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;
+    }
+    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"] });
+}
+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"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RixPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVU3RCxNQUFNLE9BQU8sK0JBQStCO0lBQzFDLGNBQWM7SUFDSyxxQkFBcUIsR0FBRyxNQUFNLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDeEQsaUJBQWlCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNDLHNCQUFzQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoRCxVQUFVLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLEtBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlELFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRWhFLFdBQVc7SUFDRixTQUFTLEdBQUcsS0FBSyxDQUErRCxRQUFRLEVBQUUsRUFBRSxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLElBQUksUUFBUSxFQUFFLENBQUMsQ0FBQztJQUNySSxZQUFZLEdBQUcsS0FBSyxDQUF5QyxV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LENBQUM7UUFDQSxDQUFZLENBQUMsTUFBTSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDcEQsQ0FBQztJQUVELGtDQUFrQztJQUMxQixnQkFBZ0I7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUM3QyxPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsQ0FBQztRQUNYLENBQUM7UUFDRCxPQUFPLENBQUMsQ0FBQztJQUNYLENBQUM7d0dBekZVLCtCQUErQjs0RkFBL0IsK0JBQStCLDZ0Q0NaNUMscXNCQW9CQTs7NEZEUmEsK0JBQStCO2tCQVAzQyxTQUFTOytCQUVFLDJCQUEyQixjQUV6QixJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBjb21wdXRlZCwgZWZmZWN0LCBpbnB1dCwgb3V0cHV0LCBzaWduYWwsIHVudHJhY2tlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUV2ZW50IH0gZnJvbSAnQGxpYnMtdWkvaW50ZXJmYWNlcy10eXBlcyc7XG5pbXBvcnQgeyBkZWxldGVVbmljb2RlLCBnZXRDb2xvckJ5SWQgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBUWVBFX1NIQVBFX0FWQVRBUiwgVFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfSBmcm9tICcuL2ludGVyZmFjZXMvYXZhdGFyLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0F2YXRhckNvbXBvbmVudCB7XG4gIC8qIFBST1BFUlRZICovXG4gIHByb3RlY3RlZCByZWFkb25seSBnZXRMYXN0VGV4dEFmdGVyU3BhY2UgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXIgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNFcnJvckxpbmtBdmF0YXJFcnJvciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc1Nob3dJY29uID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGNvbG9yID0gY29tcHV0ZWQoKCkgPT4gZ2V0Q29sb3JCeUlkKHRoaXMuaWRHZW5Db2xvcigpIHx8ICcnKSk7XG4gIHByb3RlY3RlZCBmb250U2l6ZSA9IGNvbXB1dGVkKHRoaXMuZm9udFNpemVDb21wdXRlZC5iaW5kKHRoaXMpKTtcblxuICAvKiBJTlBVVCAqL1xuICByZWFkb25seSB0eXBlU2hhcGUgPSBpbnB1dDxUWVBFX1NIQVBFX0FWQVRBUiB8IHVuZGVmaW5lZCwgVFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQ+KCdjaXJjbGUnLCB7IHRyYW5zZm9ybTogdmFsdWUgPT4gdmFsdWUgPz8gJ2NpcmNsZScgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignbXItWzhweF0nLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbXItWzhweF0nIH0pO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8VFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfCB1bmRlZmluZWQsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkPigzMiwgeyB0cmFuc2Zvcm06IHZhbHVlID0+IHZhbHVlID8/IDMyIH0pO1xuICByZWFkb25seSBsaW5rQXZhdGFyID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBsaW5rQXZhdGFyRXJyb3IgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGlkR2VuQ29sb3IgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHRleHRBdmF0YXIgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQsIHN0cmluZyB8IHVuZGVmaW5lZD4oJycsIHtcbiAgICB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4ge1xuICAgICAgdmFsdWUgPSBkZWxldGVVbmljb2RlKHZhbHVlIHx8ICcnKS5yZXBsYWNlKC9bXmEtekEtWjAtOVxcc10vZywgJycpLnRyaW0oKTtcblxuICAgICAgaWYgKHRoaXMuZ2V0TGFzdFRleHRBZnRlclNwYWNlKCkpIHtcbiAgICAgICAgdmFsdWUgPSB2YWx1ZS5zcGxpdCgnICcpLnBvcCgpIHx8ICcnO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gdmFsdWVbMF0gfHwgJyZtZGFzaDsnO1xuICAgIH1cbiAgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW1hZ2VJbmNsdWRlID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcblxuICAvKiBPVVRQVVQgKi9cbiAgcmVhZG9ubHkgb3V0QXZhdGFyRXJyb3IgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5saW5rQXZhdGFyKCk7XG4gICAgICB1bnRyYWNrZWQoKCkgPT4ge1xuICAgICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQoZmFsc2UpO1xuICAgICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KGZhbHNlKTtcbiAgICAgIH0pXG4gICAgfSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJJbWFnZUVycm9yKGU6IEVycm9yRXZlbnQpIHtcbiAgICBpZiAoIXRoaXMubGlua0F2YXRhckVycm9yKCk/LnRyaW0oKSAmJiB0aGlzLmlkR2VuQ29sb3IoKSAmJiB0aGlzLnRleHRBdmF0YXIoKSkge1xuICAgICAgdGhpcy5pc1Nob3dJY29uLnNldCh0cnVlKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KHRydWUpXG4gICAgfVxuICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KHRydWUpO1xuXG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvcigpICYmIHRoaXMuaWRHZW5Db2xvcigpICYmIHRoaXMudGV4dEF2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KHRydWUpXG4gICAgfVxuXG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKCF0aGlzLmxpbmtBdmF0YXJFcnJvcigpKSB7XG4gICAgICB0aGlzLm91dEF2YXRhckVycm9yLmVtaXQoKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICAoZSBhcyBJRXZlbnQpLnRhcmdldC5zcmMgPSB0aGlzLmxpbmtBdmF0YXJFcnJvcigpO1xuICB9XG5cbiAgLyogQ09NUFVURUQgUFJPUEVSVElFUyBGVU5DVElPTiAqL1xuICBwcml2YXRlIGZvbnRTaXplQ29tcHV0ZWQoKSB7XG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSAxNiB8fCB0aGlzLnNpemUoKSA9PT0gMjQpIHtcbiAgICAgIHJldHVybiA2O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gMzIpIHtcbiAgICAgIHJldHVybiA0O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNDApIHtcbiAgICAgIHJldHVybiAzO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNjQpIHtcbiAgICAgIHJldHVybiAxO1xuICAgIH1cbiAgICByZXR1cm4gNDtcbiAgfVxufSIsIkBpZiAobGlua0F2YXRhcigpIHx8IGlzU2hvd0ljb24oKSkge1xuICA8ZGl2IGNsYXNzPVwibGlic191aS1jb21wb25lbnQtYXZhdGFyIHt7IGNsYXNzSW5jbHVkZSgpIH19XCJcbiAgICBbY2xhc3MubGlic191aS1jb21wb25lbnQtYXZhdGFyLXJlY3RhbmdsZV09XCJ0eXBlU2hhcGUoKSA9PT0gJ3JlY3RhbmdsZSdcIlxuICAgIFtzdHlsZS53aWR0aC5weF09J3NpemUoKSdcbiAgICBbc3R5bGUuaGVpZ2h0LnB4XT0nc2l6ZSgpJz5cbiAgICBAaWYgKGxpbmtBdmF0YXIoKSAmJiAhaXNTaG93SWNvbigpKSB7XG4gICAgICA8aW1nIFtjbGFzc109XCJjbGFzc0ltYWdlSW5jbHVkZSgpXCJcbiAgICAgICAgW3NyY109J2xpbmtBdmF0YXIoKSdcbiAgICAgICAgKGVycm9yKT1cImhhbmRsZXJJbWFnZUVycm9yKCRldmVudClcIiAvPlxuICAgIH1cbiAgICBAaWYgKGlzU2hvd0ljb24oKSkge1xuICAgICAgPGRpdiBjbGFzcz0nbGlic191aS1jb21wb25lbnQtYXZhdGFyLWljb24nXG4gICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT0nY29sb3IoKSc+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ1cHBlcmNhc2UgdGV4dC1bI2ZmZmZmZl0gbGlicy11aS1mb250LWh7eyBmb250U2l6ZSgpIH19c1wiXG4gICAgICAgICAgW2lubmVySFRNTF09XCJ0ZXh0QXZhdGFyKClcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxufVxuIl19

package/esm2022/index.mjs

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

package/esm2022/interfaces/avatar.interface.mjs

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

package/esm2022/interfaces/index.mjs

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

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,93 @@
+import * as i0 from '@angular/core';
+import { signal, computed, input, output, effect, untracked, Component } from '@angular/core';
+import { getColorById, deleteUnicode } from '@libs-ui/utils';
+
+class LibsUiComponentsAvatarComponent {
+    /* PROPERTY */
+    getLastTextAfterSpace = signal(false);
+    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' });
+    classInclude = input('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });
+    size = input(32, { transform: value => value ?? 32 });
+    linkAvatar = input();
+    linkAvatarError = input();
+    idGenColor = input();
+    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] || '—';
+        }
+    });
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    /* OUTPUT */
+    outAvatarError = output();
+    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.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();
+    }
+    /* 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;
+    }
+    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"] });
+}
+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"] }]
+        }], 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, 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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"}

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,25 @@
+{
+  "name": "@libs-ui/components-avatar",
+  "version": "0.2.5",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "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"
+  }
+}