npm - @libs-ui/components-avatar - Versions diffs - 0.2.228 → 0.2.230 - Mend

@libs-ui/components-avatar 0.2.228 → 0.2.230

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/avatar.component.d.ts +12 -3
package/esm2022/avatar.component.mjs +35 -6
package/esm2022/demo/demo.component.mjs +2 -2
package/fesm2022/libs-ui-components-avatar.mjs +35 -6
package/fesm2022/libs-ui-components-avatar.mjs.map +1 -1
package/package.json +3 -3

package/avatar.component.d.ts CHANGED Viewed

@@ -1,24 +1,33 @@
+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 {
+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 getLastTextAfterSpace: import("@angular/core").InputSignal<boolean | undefined>;
     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 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 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, { "getLastTextAfterSpace": { "alias": "getLastTextAfterSpace"; "required": false; "isSignal": true; }; "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, { "getLastTextAfterSpace": { "alias": "getLastTextAfterSpace"; "required": false; "isSignal": true; }; "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; }; "idGenColor": { "alias": "idGenColor"; "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 CHANGED Viewed

@@ -1,7 +1,8 @@
-import { Component, computed, effect, input, output, signal, untracked } from '@angular/core';
+import { Component, computed, effect, inject, input, output, signal, untracked } from '@angular/core';
 import { deleteUnicode, getColorById } from '@libs-ui/utils';
-import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { NgTemplateOutlet } from '@angular/common';
+import { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import * as i0 from "@angular/core";
 export class LibsUiComponentsAvatarComponent {
     // #region PROPERTY
@@ -10,6 +11,7 @@ export class LibsUiComponentsAvatarComponent {
     isShowIcon = signal(false);
     color = computed(() => getColorById(this.idGenColor() || ''));
     fontSize = computed(this.fontSizeComputed.bind(this));
+    galleryViewerComponent;
     // #region INPUT
     getLastTextAfterSpace = input();
     typeShape = input('circle', { transform: value => value ?? 'circle' });
@@ -17,6 +19,8 @@ export class LibsUiComponentsAvatarComponent {
     size = input(32, { transform: value => value ?? 32 });
     linkAvatar = input();
     linkAvatarError = input();
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    zIndexPreviewImage = input();
     idGenColor = input();
     textAvatar = input('', {
         transform: (value) => {
@@ -27,9 +31,13 @@ export class LibsUiComponentsAvatarComponent {
             return value[0] || '&mdash;';
         }
     });
-    classImageInclude = input('', { transform: (value) => value ?? '' });
+    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();
@@ -63,6 +71,23 @@ export class LibsUiComponentsAvatarComponent {
         }
         e.target.src = this.linkAvatarError();
     }
+    handlerClickImage() {
+        if (this.galleryViewerComponent) {
+            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) {
@@ -79,11 +104,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: { getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, 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: "<libs_ui-components-popover [config]=\"{\n  whiteTheme:true,\n  width:250,\n  maxHeight:1000,\n  template:templateRef\n}\"\n[ignoreShowPopover]=\"true\">\n  <ng-container *ngTemplateOutlet=\"templateRef; context: {sizeImage: size(),isContainerView:true}\"/>\n</libs_ui-components-popover>\n\n<ng-template #templateRef let-sizeImage=\"sizeImage\" let-isContainerView=\"isContainerView\">\n  <div class=\"libs_ui-component-avatar {{ classInclude() }} {{isContainerView ? '':'!mr-0'}}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle' || !isContainerView\"\n    [style.width.px]='sizeImage || 250'\n    [style.height.px]='sizeImage'>\n    @if (!isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @else () {\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</ng-template>\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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, 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 }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", 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'\" [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (!isShowIcon()) {\n        <img [class]=\"classImageInclude()+ ' cursor-pointer'\" [src]='linkAvatar()' (error)=\"handlerImageError($event)\" (click)=\"handlerClickImage()\"/>\n    }\n    @else () {\n        <div class='libs_ui-component-avatar-icon {{containertextAvatarClassInclude()}}' [style.background]='color()'>\n            <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{textAvatarClassInclude()}}\" [innerHTML]=\"textAvatar()\">\n            </div>\n        </div>\n    }\n</div>", 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, imports: [NgTemplateOutlet, LibsUiComponentsPopoverComponent], template: "<libs_ui-components-popover [config]=\"{\n  whiteTheme:true,\n  width:250,\n  maxHeight:1000,\n  template:templateRef\n}\"\n[ignoreShowPopover]=\"true\">\n  <ng-container *ngTemplateOutlet=\"templateRef; context: {sizeImage: size(),isContainerView:true}\"/>\n</libs_ui-components-popover>\n\n<ng-template #templateRef let-sizeImage=\"sizeImage\" let-isContainerView=\"isContainerView\">\n  <div class=\"libs_ui-component-avatar {{ classInclude() }} {{isContainerView ? '':'!mr-0'}}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle' || !isContainerView\"\n    [style.width.px]='sizeImage || 250'\n    [style.height.px]='sizeImage'>\n    @if (!isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @else () {\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</ng-template>\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, imports: [NgTemplateOutlet], template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\" [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (!isShowIcon()) {\n        <img [class]=\"classImageInclude()+ ' cursor-pointer'\" [src]='linkAvatar()' (error)=\"handlerImageError($event)\" (click)=\"handlerClickImage()\"/>\n    }\n    @else () {\n        <div class='libs_ui-component-avatar-icon {{containertextAvatarClassInclude()}}' [style.background]='color()'>\n            <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{textAvatarClassInclude()}}\" [innerHTML]=\"textAvatar()\">\n            </div>\n        </div>\n    }\n</div>", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RixPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdELE9BQU8sRUFBQyxnQ0FBZ0MsRUFBQyxNQUFNLDZCQUE2QixDQUFBO0FBQzVFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVVuRCxNQUFNLE9BQU8sK0JBQStCO0lBQzFDLG1CQUFtQjtJQUNULGlCQUFpQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUMzQyxzQkFBc0IsR0FBRyxNQUFNLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDaEQsVUFBVSxHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNwQyxLQUFLLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM5RCxRQUFRLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUVoRSxnQkFBZ0I7SUFDUCxxQkFBcUIsR0FBRyxLQUFLLEVBQVcsQ0FBQztJQUN6QyxTQUFTLEdBQUcsS0FBSyxDQUErRCxRQUFRLEVBQUUsRUFBRSxTQUFT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Q0FBQztZQUNsQyxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLEVBQUUsQ0FBQztZQUM1QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1lBRTNCLE9BQU87UUFDVCxDQUFDO1FBQ0EsQ0FBWSxDQUFDLE1BQU0sQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3BELENBQUM7SUFFRCxrQ0FBa0M7SUFDMUIsZ0JBQWdCO1FBQ3RCLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDN0MsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDdkIsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDdkIsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDdkIsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDO1FBQ0QsT0FBTyxDQUFDLENBQUM7SUFDWCxDQUFDO3dHQTFGVSwrQkFBK0I7NEZBQS9CLCtCQUErQixxNENDZjVDLHdsQ0E4QkEscXBCRGpCVyxnQkFBZ0Isb0pBQUMsZ0NBQWdDOzs0RkFFL0MsK0JBQStCO2tCQVIzQyxTQUFTOytCQUVFLDJCQUEyQixjQUV6QixJQUFJLFdBRVIsQ0FBQyxnQkFBZ0IsRUFBQyxnQ0FBZ0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGVmZmVjdCwgaW5wdXQsIG91dHB1dCwgc2lnbmFsLCB1bnRyYWNrZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElFdmVudCB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuaW1wb3J0IHsgZGVsZXRlVW5pY29kZSwgZ2V0Q29sb3JCeUlkIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgVFlQRV9TSEFQRV9BVkFUQVIsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2F2YXRhci5pbnRlcmZhY2UnO1xuaW1wb3J0IHtMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJ1xuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6W05nVGVtcGxhdGVPdXRsZXQsTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnQge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBpc0Vycm9yTGlua0F2YXRhciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc0Vycm9yTGlua0F2YXRhckVycm9yID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGlzU2hvd0ljb24gPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgY29sb3IgPSBjb21wdXRlZCgoKSA9PiBnZXRDb2xvckJ5SWQodGhpcy5pZEdlbkNvbG9yKCkgfHwgJycpKTtcbiAgcHJvdGVjdGVkIGZvbnRTaXplID0gY29tcHV0ZWQodGhpcy5mb250U2l6ZUNvbXB1dGVkLmJpbmQodGhpcykpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgZ2V0TGFzdFRleHRBZnRlclNwYWNlID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgdHlwZVNoYXBlID0gaW5wdXQ8VFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQsIFRZUEVfU0hBUEVfQVZBVEFSIHwgdW5kZWZpbmVkPignY2lyY2xlJywgeyB0cmFuc2Zvcm06IHZhbHVlID0+IHZhbHVlID8/ICdjaXJjbGUnIH0pO1xuICByZWFkb25seSBjbGFzc0luY2x1ZGUgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQsIHN0cmluZyB8IHVuZGVmaW5lZD4oJ21yLVs4cHhdJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJ21yLVs4cHhdJyB9KTtcbiAgcmVhZG9ubHkgc2l6ZSA9IGlucHV0PFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkLCBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRyB8IHVuZGVmaW5lZD4oMzIsIHsgdHJhbnNmb3JtOiB2YWx1ZSA9PiB2YWx1ZSA/PyAzMiB9KTtcbiAgcmVhZG9ubHkgbGlua0F2YXRhciA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgbGlua0F2YXRhckVycm9yID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBpZEdlbkNvbG9yID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSB0ZXh0QXZhdGFyID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7XG4gICAgdHJhbnNmb3JtOiAodmFsdWUpID0+IHtcbiAgICAgIHZhbHVlID0gZGVsZXRlVW5pY29kZSh2YWx1ZSB8fCAnJykucmVwbGFjZSgvW15hLXpBLVowLTlcXHNdL2csICcnKS50cmltKCk7XG5cbiAgICAgIGlmICh0aGlzLmdldExhc3RUZXh0QWZ0ZXJTcGFjZSgpKSB7XG4gICAgICAgIHZhbHVlID0gdmFsdWUuc3BsaXQoJyAnKS5wb3AoKSB8fCAnJztcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHZhbHVlWzBdIHx8ICcmbWRhc2g7JztcbiAgICB9XG4gIH0pO1xuICByZWFkb25seSBjbGFzc0ltYWdlSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignJywgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJycgfSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0QXZhdGFyRXJyb3IgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5saW5rQXZhdGFyKCk7XG4gICAgICB1bnRyYWNrZWQoKCkgPT4ge1xuICAgICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQoZmFsc2UpO1xuICAgICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KGZhbHNlKTtcbiAgICAgIH0pXG4gICAgfSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJJbWFnZUVycm9yKGU6IEVycm9yRXZlbnQpIHtcbiAgICBpZiAoIXRoaXMubGlua0F2YXRhckVycm9yKCk/LnRyaW0oKSAmJiB0aGlzLmlkR2VuQ29sb3IoKSAmJiB0aGlzLnRleHRBdmF0YXIoKSkge1xuICAgICAgdGhpcy5vdXRBdmF0YXJFcnJvci5lbWl0KCk7XG4gICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KHRydWUpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLmlzRXJyb3JMaW5rQXZhdGFyKCkpIHtcbiAgICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvci5zZXQodHJ1ZSlcbiAgICB9XG4gICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhci5zZXQodHJ1ZSk7XG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkgJiYgdGhpcy5pZEdlbkNvbG9yKCkgJiYgdGhpcy50ZXh0QXZhdGFyKCkpIHtcbiAgICAgIHRoaXMuaXNTaG93SWNvbi5zZXQodHJ1ZSlcbiAgICB9XG5cblxuICAgIGlmICh0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3IoKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAoIXRoaXMubGlua0F2YXRhckVycm9yKCkpIHtcbiAgICAgIHRoaXMub3V0QXZhdGFyRXJyb3IuZW1pdCgpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIChlIGFzIElFdmVudCkudGFyZ2V0LnNyYyA9IHRoaXMubGlua0F2YXRhckVycm9yKCk7XG4gIH1cblxuICAvKiBDT01QVVRFRCBQUk9QRVJUSUVTIEZVTkNUSU9OICovXG4gIHByaXZhdGUgZm9udFNpemVDb21wdXRlZCgpIHtcbiAgICBpZiAodGhpcy5zaXplKCkgPT09IDE2IHx8IHRoaXMuc2l6ZSgpID09PSAyNCkge1xuICAgICAgcmV0dXJuIDY7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSAzMikge1xuICAgICAgcmV0dXJuIDQ7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSA0MCkge1xuICAgICAgcmV0dXJuIDM7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSA2NCkge1xuICAgICAgcmV0dXJuIDE7XG4gICAgfVxuICAgIHJldHVybiA0O1xuICB9XG59IiwiPGxpYnNfdWktY29tcG9uZW50cy1wb3BvdmVyIFtjb25maWddPVwie1xuICB3aGl0ZVRoZW1lOnRydWUsXG4gIHdpZHRoOjI1MCxcbiAgbWF4SGVpZ2h0OjEwMDAsXG4gIHRlbXBsYXRlOnRlbXBsYXRlUmVmXG59XCJcbltpZ25vcmVTaG93UG9wb3Zlcl09XCJ0cnVlXCI+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZVJlZjsgY29udGV4dDoge3NpemVJbWFnZTogc2l6ZSgpLGlzQ29udGFpbmVyVmlldzp0cnVlfVwiLz5cbjwvbGlic191aS1jb21wb25lbnRzLXBvcG92ZXI+XG5cbjxuZy10ZW1wbGF0ZSAjdGVtcGxhdGVSZWYgbGV0LXNpemVJbWFnZT1cInNpemVJbWFnZVwiIGxldC1pc0NvbnRhaW5lclZpZXc9XCJpc0NvbnRhaW5lclZpZXdcIj5cbiAgPGRpdiBjbGFzcz1cImxpYnNfdWktY29tcG9uZW50LWF2YXRhciB7eyBjbGFzc0luY2x1ZGUoKSB9fSB7e2lzQ29udGFpbmVyVmlldyA/ICcnOichbXItMCd9fVwiXG4gICAgW2NsYXNzLmxpYnNfdWktY29tcG9uZW50LWF2YXRhci1yZWN0YW5nbGVdPVwidHlwZVNoYXBlKCkgPT09ICdyZWN0YW5nbGUnIHx8ICFpc0NvbnRhaW5lclZpZXdcIlxuICAgIFtzdHlsZS53aWR0aC5weF09J3NpemVJbWFnZSB8fCAyNTAnXG4gICAgW3N0eWxlLmhlaWdodC5weF09J3NpemVJbWFnZSc+XG4gICAgQGlmICghaXNTaG93SWNvbigpKSB7XG4gICAgICA8aW1nIFtjbGFzc109XCJjbGFzc0ltYWdlSW5jbHVkZSgpXCJcbiAgICAgICAgW3NyY109J2xpbmtBdmF0YXIoKSdcbiAgICAgICAgKGVycm9yKT1cImhhbmRsZXJJbWFnZUVycm9yKCRldmVudClcIiAvPlxuICAgIH1cbiAgICBAZWxzZSAoKSB7XG4gICAgICA8ZGl2IGNsYXNzPSdsaWJzX3VpLWNvbXBvbmVudC1hdmF0YXItaWNvbidcbiAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPSdjb2xvcigpJz5cbiAgICAgICAgPGRpdiBjbGFzcz1cInVwcGVyY2FzZSB0ZXh0LVsjZmZmZmZmXSBsaWJzLXVpLWZvbnQtaHt7IGZvbnRTaXplKCkgfX1zXCJcbiAgICAgICAgICBbaW5uZXJIVE1MXT1cInRleHRBdmF0YXIoKVwiPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9hdmF0YXIvc3JjL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRS9ILE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLHNDQUFzQyxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFDcEYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0scUNBQXFDLENBQUM7O0FBVXBGLE1BQU0sT0FBTywrQkFBK0I7SUFDMUMsbUJBQW1CO0lBQ1QsaUJBQWlCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNDLHNCQUFzQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoRCxVQUFVLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLEtBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzlELFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRXhELHNCQUFzQixDQUF3RDtJQUV0RixnQkFBZ0I7SUFD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QUUsRUFBRSxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxDQUFDO1FBQ1gsQ0FBQztRQUNELE9BQU8sQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxTQUFTLENBQUM7SUFDMUMsQ0FBQzt3R0EzSFUsK0JBQStCOzRGQUEvQiwrQkFBK0IsbThEQ2hCNUMsb3RCQVlNOzs0RkRJTywrQkFBK0I7a0JBUjNDLFNBQVM7K0JBRUUsMkJBQTJCLGNBRXpCLElBQUksV0FFUCxDQUFDLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb21wb25lbnRSZWYsIGNvbXB1dGVkLCBlZmZlY3QsIGluamVjdCwgaW5wdXQsIE9uRGVzdHJveSwgb3V0cHV0LCBzaWduYWwsIHVudHJhY2tlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUV2ZW50IH0gZnJvbSAnQGxpYnMtdWkvaW50ZXJmYWNlcy10eXBlcyc7XG5pbXBvcnQgeyBkZWxldGVVbmljb2RlLCBnZXRDb2xvckJ5SWQgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBUWVBFX1NIQVBFX0FWQVRBUiwgVFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfSBmcm9tICcuL2ludGVyZmFjZXMvYXZhdGFyLmludGVyZmFjZSc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNHYWxsZXJ5Vmlld2VyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1nYWxsZXJ5J1xuaW1wb3J0IHsgTGlic1VpRHluYW1pY0NvbXBvbmVudFNlcnZpY2UgfSBmcm9tICdAbGlicy11aS9zZXJ2aWNlcy1keW5hbWljLWNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtOZ1RlbXBsYXRlT3V0bGV0XVxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95e1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBpc0Vycm9yTGlua0F2YXRhciA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc0Vycm9yTGlua0F2YXRhckVycm9yID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGlzU2hvd0ljb24gPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgY29sb3IgPSBjb21wdXRlZCgoKSA9PiBnZXRDb2xvckJ5SWQodGhpcy5pZEdlbkNvbG9yKCkgfHwgJycpKTtcbiAgcHJvdGVjdGVkIGZvbnRTaXplID0gY29tcHV0ZWQodGhpcy5mb250U2l6ZUNvbXB1dGVkLmJpbmQodGhpcykpO1xuXG4gIHByaXZhdGUgZ2FsbGVyeVZpZXdlckNvbXBvbmVudD86IENvbXBvbmVudFJlZjxMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudD47XG5cbiAgLy8gI3JlZ2lvbiBJTlBVVFxuICByZWFkb25seSBnZXRMYXN0VGV4dEFmdGVyU3BhY2UgPSBpbnB1dDxib29sZWFuPigpO1xuICByZWFkb25seSB0eXBlU2hhcGUgPSBpbnB1dDxUWVBFX1NIQVBFX0FWQVRBUiB8IHVuZGVmaW5lZCwgVFlQRV9TSEFQRV9BVkFUQVIgfCB1bmRlZmluZWQ+KCdjaXJjbGUnLCB7IHRyYW5zZm9ybTogdmFsdWUgPT4gdmFsdWUgPz8gJ2NpcmNsZScgfSk7XG4gIHJlYWRvbmx5IGNsYXNzSW5jbHVkZSA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgdW5kZWZpbmVkPignbXItWzhweF0nLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbXItWzhweF0nIH0pO1xuICByZWFkb25seSBzaXplID0gaW5wdXQ8VFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgfCB1bmRlZmluZWQsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIHwgdW5kZWZpbmVkPigzMiwgeyB0cmFuc2Zvcm06IHZhbHVlID0+IHZhbHVlID8/IDMyIH0pO1xuICByZWFkb25seSBsaW5rQXZhdGFyID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBsaW5rQXZhdGFyRXJyb3IgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNsYXNzSW1hZ2VJbmNsdWRlID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcbiAgcmVhZG9ubHkgekluZGV4UHJldmlld0ltYWdlID0gaW5wdXQ8bnVtYmVyPigpO1xuICByZWFkb25seSBpZEdlbkNvbG9yID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSB0ZXh0QXZhdGFyID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCB1bmRlZmluZWQ+KCcnLCB7XG4gICAgdHJhbnNmb3JtOiAodmFsdWUpID0+IHtcbiAgICAgIHZhbHVlID0gZGVsZXRlVW5pY29kZSh2YWx1ZSB8fCAnJykucmVwbGFjZSgvW15hLXpBLVowLTlcXHNdL2csICcnKS50cmltKCk7XG5cbiAgICAgIGlmICh0aGlzLmdldExhc3RUZXh0QWZ0ZXJTcGFjZSgpKSB7XG4gICAgICAgIHZhbHVlID0gdmFsdWUuc3BsaXQoJyAnKS5wb3AoKSB8fCAnJztcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHZhbHVlWzBdIHx8ICcmbWRhc2g7JztcbiAgICB9XG4gIH0pO1xuICByZWFkb25seSB0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlID0gaW5wdXQ8c3RyaW5nLHN0cmluZyB8IHVuZGVmaW5lZD4oJycseyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gJycgfSk7XG4gIHJlYWRvbmx5IGNvbnRhaW5lcnRleHRBdmF0YXJDbGFzc0luY2x1ZGUgPSBpbnB1dDxzdHJpbmcsc3RyaW5nIHwgdW5kZWZpbmVkPignJyx7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnJyB9KTtcblxuICAvLyAjcmVnaW9uIE9VVFBVVFxuICByZWFkb25seSBvdXRBdmF0YXJFcnJvciA9IG91dHB1dDx2b2lkPigpO1xuICByZWFkb25seSBvdXRFdmVudFByZXZpZXdJbWFnZSA9IG91dHB1dDwnb3Blbid8J3JlbW92ZSc+KCk7XG5cbiAgLy8gI3JlZ2lvbiBJTkpFQ1RcbiAgcHJpdmF0ZSBkeW5hbWljQ29tcG9uZW50U2VydmljZSA9IGluamVjdChMaWJzVWlEeW5hbWljQ29tcG9uZW50U2VydmljZSk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMubGlua0F2YXRhcigpO1xuICAgICAgdW50cmFja2VkKCgpID0+IHtcbiAgICAgICAgdGhpcy5pc1Nob3dJY29uLnNldChmYWxzZSk7XG4gICAgICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KGZhbHNlKTtcbiAgICAgICAgdGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yLnNldChmYWxzZSk7XG4gICAgICB9KVxuICAgIH0pO1xuICB9XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByb3RlY3RlZCBhc3luYyBoYW5kbGVySW1hZ2VFcnJvcihlOiBFcnJvckV2ZW50KSB7XG4gICAgaWYgKCF0aGlzLmxpbmtBdmF0YXJFcnJvcigpPy50cmltKCkgJiYgdGhpcy5pZEdlbkNvbG9yKCkgJiYgdGhpcy50ZXh0QXZhdGFyKCkpIHtcbiAgICAgIHRoaXMub3V0QXZhdGFyRXJyb3IuZW1pdCgpO1xuICAgICAgdGhpcy5pc1Nob3dJY29uLnNldCh0cnVlKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzRXJyb3JMaW5rQXZhdGFyRXJyb3Iuc2V0KHRydWUpXG4gICAgfVxuICAgIHRoaXMuaXNFcnJvckxpbmtBdmF0YXIuc2V0KHRydWUpO1xuXG4gICAgaWYgKHRoaXMuaXNFcnJvckxpbmtBdmF0YXJFcnJvcigpICYmIHRoaXMuaWRHZW5Db2xvcigpICYmIHRoaXMudGV4dEF2YXRhcigpKSB7XG4gICAgICB0aGlzLmlzU2hvd0ljb24uc2V0KHRydWUpXG4gICAgfVxuXG5cbiAgICBpZiAodGhpcy5pc0Vycm9yTGlua0F2YXRhckVycm9yKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKCF0aGlzLmxpbmtBdmF0YXJFcnJvcigpKSB7XG4gICAgICB0aGlzLm91dEF2YXRhckVycm9yLmVtaXQoKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICAoZSBhcyBJRXZlbnQpLnRhcmdldC5zcmMgPSB0aGlzLmxpbmtBdmF0YXJFcnJvcigpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJDbGlja0ltYWdlKCkge1xuICAgIGlmICh0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5vdXRFdmVudFByZXZpZXdJbWFnZS5lbWl0KCdvcGVuJyk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50ID0gdGhpcy5keW5hbWljQ29tcG9uZW50U2VydmljZS5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShMaWJzVWlDb21wb25lbnRzR2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCdpbWFnZXMnLFt7aW1hZ2VTcmM6dGhpcy5saW5rQXZhdGFyKCl9XSk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCdmaWVsZERpc3BsYXlTcmNJbWFnZScsJ2ltYWdlU3JjJyk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCdzaW5nbGVJbWFnZScsdHJ1ZSk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50LnNldElucHV0KCd6SW5kZXgnLHRoaXMuekluZGV4UHJldmlld0ltYWdlKCkpO1xuICAgIHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudC5pbnN0YW5jZS5vdXRDbG9zZS5zdWJzY3JpYmUoKCk9PntcbiAgICAgIHRoaXMuZHluYW1pY0NvbXBvbmVudFNlcnZpY2UucmVtb3ZlKHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgICB0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQgPSB1bmRlZmluZWQ7XG4gICAgICB0aGlzLm91dEV2ZW50UHJldmlld0ltYWdlLmVtaXQoJ3JlbW92ZScpO1xuICAgIH0pXG5cbiAgICB0aGlzLmR5bmFtaWNDb21wb25lbnRTZXJ2aWNlLmFkZFRvQm9keSh0aGlzLmdhbGxlcnlWaWV3ZXJDb21wb25lbnQpO1xuICB9XG5cbiAgLyogQ09NUFVURUQgUFJPUEVSVElFUyBGVU5DVElPTiAqL1xuICBwcml2YXRlIGZvbnRTaXplQ29tcHV0ZWQoKSB7XG4gICAgaWYgKHRoaXMuc2l6ZSgpID09PSAxNiB8fCB0aGlzLnNpemUoKSA9PT0gMjQpIHtcbiAgICAgIHJldHVybiA2O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gMzIpIHtcbiAgICAgIHJldHVybiA0O1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNDApIHtcbiAgICAgIHJldHVybiAzO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnNpemUoKSA9PT0gNjQpIHtcbiAgICAgIHJldHVybiAxO1xuICAgIH1cbiAgICByZXR1cm4gNDtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZHluYW1pY0NvbXBvbmVudFNlcnZpY2UucmVtb3ZlKHRoaXMuZ2FsbGVyeVZpZXdlckNvbXBvbmVudCk7XG4gICAgdGhpcy5nYWxsZXJ5Vmlld2VyQ29tcG9uZW50ID0gdW5kZWZpbmVkO1xuICB9XG59IiwiPGRpdiBjbGFzcz1cImxpYnNfdWktY29tcG9uZW50LWF2YXRhciB7eyBjbGFzc0luY2x1ZGUoKSB9fVwiXG4gICAgW2NsYXNzLmxpYnNfdWktY29tcG9uZW50LWF2YXRhci1yZWN0YW5nbGVdPVwidHlwZVNoYXBlKCkgPT09ICdyZWN0YW5nbGUnXCIgW3N0eWxlLndpZHRoLnB4XT0nc2l6ZSgpJ1xuICAgIFtzdHlsZS5oZWlnaHQucHhdPSdzaXplKCknPlxuICAgIEBpZiAoIWlzU2hvd0ljb24oKSkge1xuICAgICAgICA8aW1nIFtjbGFzc109XCJjbGFzc0ltYWdlSW5jbHVkZSgpKyAnIGN1cnNvci1wb2ludGVyJ1wiIFtzcmNdPSdsaW5rQXZhdGFyKCknIChlcnJvcik9XCJoYW5kbGVySW1hZ2VFcnJvcigkZXZlbnQpXCIgKGNsaWNrKT1cImhhbmRsZXJDbGlja0ltYWdlKClcIi8+XG4gICAgfVxuICAgIEBlbHNlICgpIHtcbiAgICAgICAgPGRpdiBjbGFzcz0nbGlic191aS1jb21wb25lbnQtYXZhdGFyLWljb24ge3tjb250YWluZXJ0ZXh0QXZhdGFyQ2xhc3NJbmNsdWRlKCl9fScgW3N0eWxlLmJhY2tncm91bmRdPSdjb2xvcigpJz5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ1cHBlcmNhc2UgdGV4dC1bI2ZmZmZmZl0gbGlicy11aS1mb250LWh7eyBmb250U2l6ZSgpIH19cyB7e3RleHRBdmF0YXJDbGFzc0luY2x1ZGUoKX19XCIgW2lubmVySFRNTF09XCJ0ZXh0QXZhdGFyKClcIj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICB9XG48L2Rpdj4iXX0=

package/esm2022/demo/demo.component.mjs CHANGED Viewed

@@ -72,7 +72,7 @@ export class LibsUiComponentsAvatarDemoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarDemoComponent, isStandalone: true, selector: "lib-avatar-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component Avatar cho Angular</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-avatar</code> l\u00E0 m\u1ED9t\n        component Angular \u0111\u1EC3 hi\u1EC3n th\u1ECB avatar ng\u01B0\u1EDDi d\u00F9ng v\u1EDBi nhi\u1EC1u t\u00F9y ch\u1ECDn nh\u01B0 h\u00ECnh \u1EA3nh, ch\u1EEF c\u00E1i \u0111\u1EA7u,\n        m\u00E0u s\u1EAFc t\u1EF1 \u0111\u1ED9ng, v\u00E0 h\u1ED7 tr\u1EE3 fallback khi \u1EA3nh b\u1ECB l\u1ED7i.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar c\u01A1 b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n            [size]=\"selectedSize\"\n            [typeShape]=\"selectedShape\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi h\u00ECnh \u1EA3nh t\u1EEB URL</p>\n            <p class=\"text-sm text-gray-500\">K\u00EDch th\u01B0\u1EDBc: {{ selectedSize }}px, H\u00ECnh d\u1EA1ng: {{ selectedShape }}</p>\n          </div>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button *ngFor=\"let size of sizeOptions\"\n            (click)=\"setSize(size)\"\n            class=\"px-3 py-1 border rounded\"\n            [class.bg-blue-500]=\"selectedSize === size\"\n            [class.text-white]=\"selectedSize === size\">\n            {{ size }}px\n          </button>\n          <button (click)=\"toggleShape()\"\n            class=\"px-3 py-1 border rounded ml-4\">\n            \u0110\u1ED5i h\u00ECnh d\u1EA1ng\n          </button>\n        </div>\n      </div>\n\n      <!-- Text Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar v\u0103n b\u1EA3n</h3>\n        <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n          @for (name of userNames; track name) {\n            <libs_ui-components-avatar [textAvatar]=\"name\"\n              [idGenColor]=\"name\"\n              [size]=\"40\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u00EAn v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng d\u1EF1a tr\u00EAn ID.</p>\n      </div>\n\n      <!-- Avatar Group Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nh\u00F3m Avatar</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          @for (user of users; track user) {\n            <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n              [textAvatar]=\"user['name']\"\n              [idGenColor]=\"user['id']\"\n              [size]=\"user['size']\"\n              [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n              [classInclude]=\"'mr-2'\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Nh\u00F3m avatars v\u1EDBi k\u00EDch th\u01B0\u1EDBc kh\u00E1c nhau v\u00E0 hi\u1EC3n th\u1ECB fallback khi kh\u00F4ng c\u00F3\n          h\u00ECnh \u1EA3nh.</p>\n      </div>\n\n      <!-- Error Handling Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">X\u1EED l\u00FD l\u1ED7i</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [linkAvatarError]=\"fallbackAvatar\"\n            [textAvatar]=\"'Error Fallback'\"\n            [idGenColor]=\"'error-demo'\"\n            [size]=\"48\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi x\u1EED l\u00FD l\u1ED7i h\u00ECnh \u1EA3nh</p>\n            <p class=\"text-sm text-gray-500\">Khi h\u00ECnh \u1EA3nh ch\u00EDnh b\u1ECB l\u1ED7i, s\u1EBD hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh thay th\u1EBF.</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback to Text Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback v\u1EC1 v\u0103n b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [textAvatar]=\"'Text Fallback'\"\n            [idGenColor]=\"'text-fallback'\"\n            [size]=\"48\"\n            (outAvatarError)=\"handleAvatarError()\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi fallback v\u1EC1 v\u0103n b\u1EA3n</p>\n            <p class=\"text-sm text-gray-500\">Khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh, s\u1EBD hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u c\u1EE7a v\u0103n b\u1EA3n v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1\n              \u0111\u1ED9ng.</p>\n            @if (showErrorMessage) {\n              <p class=\"text-sm text-red-500 mt-2\">Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh. \u0110\u00E3 hi\u1EC3n th\u1ECB v\u0103n b\u1EA3n thay th\u1EBF.</p>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n  [textAvatar]=\"'Nguy\u1EC5n V\u0103n A'\"\n  [idGenColor]=\"'user-123'\"\n  [size]=\"40\"\n  [typeShape]=\"'circle'\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  // Component logic\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: X\u1EED l\u00FD s\u1EF1 ki\u1EC7n l\u1ED7i</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"user.avatar\"\n  [linkAvatarError]=\"defaultAvatar\"\n  [textAvatar]=\"user.name\"\n  [idGenColor]=\"user.id\"\n  [size]=\"40\"\n  (outAvatarError)=\"handleAvatarError()\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-error-handler',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './error-handler.component.html'\n&#125;)\nexport class ErrorHandlerComponent &#123;\n  user = &#123;\n    id: 'user-123',\n    name: 'Nguy\u1EC5n V\u0103n A',\n    avatar: 'https://example.com/avatar.jpg'\n  &#125;;\n  \n  defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n  handleAvatarError() &#123;\n    console.log('Kh\u00F4ng th\u1EC3 t\u1EA3i \u0111\u01B0\u1EE3c h\u00ECnh \u1EA3nh avatar');\n    // Th\u1EF1c hi\u1EC7n c\u00E1c x\u1EED l\u00FD kh\u00E1c khi c\u00F3 l\u1ED7i\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh avatar</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh thay th\u1EBF khi avatar ch\u00EDnh b\u1ECB l\u1ED7i\n              </td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh (th\u01B0\u1EDDng l\u00E0 ch\u1EEF c\u00E1i\n                \u0111\u1EA7u c\u1EE7a t\u00EAn)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">ID d\u00F9ng \u0111\u1EC3 t\u1EA1o m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng khi s\u1EED d\u1EE5ng v\u0103n b\u1EA3n</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n                  | 24 | 32 | 40 | 48 | 64</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">K\u00EDch th\u01B0\u1EDBc c\u1EE7a avatar (t\u00EDnh b\u1EB1ng pixel)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' | 'rectangle'</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">H\u00ECnh d\u1EA1ng c\u1EE7a avatar (tr\u00F2n ho\u1EB7c vu\u00F4ng)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho container ch\u00EDnh</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho th\u1EBB img</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">N\u1EBFu true, ch\u1EC9 l\u1EA5y ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u1EEB cu\u1ED1i c\u00F9ng trong\n                textAvatar</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">S\u1EF1 ki\u1EC7n \u0111\u01B0\u1EE3c k\u00EDch ho\u1EA1t khi linkAvatar b\u1ECB l\u1ED7i v\u00E0 kh\u00F4ng c\u00F3\n                linkAvatarError</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"bg-gray-50 p-6 rounded-lg\">\n        <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig &#123;\n  classImageInclude?: string;\n  classInclude?: string;\n  size?: TYPE_SIZE_AVATAR_CONFIG;\n  linkAvatar?: string;\n  linkAvatarError?: string;\n  idGenColor?: string;\n  textAvatar?: string;\n  typeShape?: TYPE_SHAPE_AVATAR;\n  getLastTextAfterSpace?: boolean;\n  &#125;\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';</code></pre>\n        <p class=\"text-gray-600\">Interface \u0111\u1ECBnh ngh\u0129a c\u1EA5u h\u00ECnh c\u1EE7a avatar component.</p>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: [":host{display:block;width:100%;padding:16px}.demo-wrapper{background-color:#f9fafb;border-radius:8px;padding:16px;margin-bottom:16px}.code-block{font-family:monospace;background-color:#f3f4f6;border-radius:4px;padding:2px 4px;font-size:14px}button{transition:all .2s ease}button:hover{opacity:.9}button:active{transform:scale(.98)}.size-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px}.size-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.shape-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px;margin-left:8px}.shape-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.error-message{color:#ef4444;margin-top:8px;font-size:14px}.copy-button{background-color:#3b82f6;color:#fff;border-radius:4px;padding:4px 8px;font-size:14px;border:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarDemoComponent, isStandalone: true, selector: "lib-avatar-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component Avatar cho Angular</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-avatar</code> l\u00E0 m\u1ED9t\n        component Angular \u0111\u1EC3 hi\u1EC3n th\u1ECB avatar ng\u01B0\u1EDDi d\u00F9ng v\u1EDBi nhi\u1EC1u t\u00F9y ch\u1ECDn nh\u01B0 h\u00ECnh \u1EA3nh, ch\u1EEF c\u00E1i \u0111\u1EA7u,\n        m\u00E0u s\u1EAFc t\u1EF1 \u0111\u1ED9ng, v\u00E0 h\u1ED7 tr\u1EE3 fallback khi \u1EA3nh b\u1ECB l\u1ED7i.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar c\u01A1 b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n            [size]=\"selectedSize\"\n            [typeShape]=\"selectedShape\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi h\u00ECnh \u1EA3nh t\u1EEB URL</p>\n            <p class=\"text-sm text-gray-500\">K\u00EDch th\u01B0\u1EDBc: {{ selectedSize }}px, H\u00ECnh d\u1EA1ng: {{ selectedShape }}</p>\n          </div>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button *ngFor=\"let size of sizeOptions\"\n            (click)=\"setSize(size)\"\n            class=\"px-3 py-1 border rounded\"\n            [class.bg-blue-500]=\"selectedSize === size\"\n            [class.text-white]=\"selectedSize === size\">\n            {{ size }}px\n          </button>\n          <button (click)=\"toggleShape()\"\n            class=\"px-3 py-1 border rounded ml-4\">\n            \u0110\u1ED5i h\u00ECnh d\u1EA1ng\n          </button>\n        </div>\n      </div>\n\n      <!-- Text Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar v\u0103n b\u1EA3n</h3>\n        <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n          @for (name of userNames; track name) {\n            <libs_ui-components-avatar [textAvatar]=\"name\"\n              [idGenColor]=\"name\"\n              [size]=\"40\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u00EAn v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng d\u1EF1a tr\u00EAn ID.</p>\n      </div>\n\n      <!-- Avatar Group Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nh\u00F3m Avatar</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          @for (user of users; track user) {\n            <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n              [textAvatar]=\"user['name']\"\n              [idGenColor]=\"user['id']\"\n              [size]=\"user['size']\"\n              [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n              [classInclude]=\"'mr-2'\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Nh\u00F3m avatars v\u1EDBi k\u00EDch th\u01B0\u1EDBc kh\u00E1c nhau v\u00E0 hi\u1EC3n th\u1ECB fallback khi kh\u00F4ng c\u00F3\n          h\u00ECnh \u1EA3nh.</p>\n      </div>\n\n      <!-- Error Handling Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">X\u1EED l\u00FD l\u1ED7i</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [linkAvatarError]=\"fallbackAvatar\"\n            [textAvatar]=\"'Error Fallback'\"\n            [idGenColor]=\"'error-demo'\"\n            [size]=\"48\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi x\u1EED l\u00FD l\u1ED7i h\u00ECnh \u1EA3nh</p>\n            <p class=\"text-sm text-gray-500\">Khi h\u00ECnh \u1EA3nh ch\u00EDnh b\u1ECB l\u1ED7i, s\u1EBD hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh thay th\u1EBF.</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback to Text Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback v\u1EC1 v\u0103n b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [textAvatar]=\"'Text Fallback'\"\n            [idGenColor]=\"'text-fallback'\"\n            [size]=\"48\"\n            (outAvatarError)=\"handleAvatarError()\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi fallback v\u1EC1 v\u0103n b\u1EA3n</p>\n            <p class=\"text-sm text-gray-500\">Khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh, s\u1EBD hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u c\u1EE7a v\u0103n b\u1EA3n v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1\n              \u0111\u1ED9ng.</p>\n            @if (showErrorMessage) {\n              <p class=\"text-sm text-red-500 mt-2\">Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh. \u0110\u00E3 hi\u1EC3n th\u1ECB v\u0103n b\u1EA3n thay th\u1EBF.</p>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n  [textAvatar]=\"'Nguy\u1EC5n V\u0103n A'\"\n  [idGenColor]=\"'user-123'\"\n  [size]=\"40\"\n  [typeShape]=\"'circle'\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  // Component logic\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: X\u1EED l\u00FD s\u1EF1 ki\u1EC7n l\u1ED7i</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"user.avatar\"\n  [linkAvatarError]=\"defaultAvatar\"\n  [textAvatar]=\"user.name\"\n  [idGenColor]=\"user.id\"\n  [size]=\"40\"\n  (outAvatarError)=\"handleAvatarError()\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-error-handler',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './error-handler.component.html'\n&#125;)\nexport class ErrorHandlerComponent &#123;\n  user = &#123;\n    id: 'user-123',\n    name: 'Nguy\u1EC5n V\u0103n A',\n    avatar: 'https://example.com/avatar.jpg'\n  &#125;;\n  \n  defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n  handleAvatarError() &#123;\n    console.log('Kh\u00F4ng th\u1EC3 t\u1EA3i \u0111\u01B0\u1EE3c h\u00ECnh \u1EA3nh avatar');\n    // Th\u1EF1c hi\u1EC7n c\u00E1c x\u1EED l\u00FD kh\u00E1c khi c\u00F3 l\u1ED7i\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh avatar</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh thay th\u1EBF khi avatar ch\u00EDnh b\u1ECB l\u1ED7i\n              </td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh (th\u01B0\u1EDDng l\u00E0 ch\u1EEF c\u00E1i\n                \u0111\u1EA7u c\u1EE7a t\u00EAn)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">ID d\u00F9ng \u0111\u1EC3 t\u1EA1o m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng khi s\u1EED d\u1EE5ng v\u0103n b\u1EA3n</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n                  | 24 | 32 | 40 | 48 | 64</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">K\u00EDch th\u01B0\u1EDBc c\u1EE7a avatar (t\u00EDnh b\u1EB1ng pixel)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' | 'rectangle'</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">H\u00ECnh d\u1EA1ng c\u1EE7a avatar (tr\u00F2n ho\u1EB7c vu\u00F4ng)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho container ch\u00EDnh</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho th\u1EBB img</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">N\u1EBFu true, ch\u1EC9 l\u1EA5y ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u1EEB cu\u1ED1i c\u00F9ng trong\n                textAvatar</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">S\u1EF1 ki\u1EC7n \u0111\u01B0\u1EE3c k\u00EDch ho\u1EA1t khi linkAvatar b\u1ECB l\u1ED7i v\u00E0 kh\u00F4ng c\u00F3\n                linkAvatarError</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"bg-gray-50 p-6 rounded-lg\">\n        <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig &#123;\n  classImageInclude?: string;\n  classInclude?: string;\n  size?: TYPE_SIZE_AVATAR_CONFIG;\n  linkAvatar?: string;\n  linkAvatarError?: string;\n  idGenColor?: string;\n  textAvatar?: string;\n  typeShape?: TYPE_SHAPE_AVATAR;\n  getLastTextAfterSpace?: boolean;\n  &#125;\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';</code></pre>\n        <p class=\"text-gray-600\">Interface \u0111\u1ECBnh ngh\u0129a c\u1EA5u h\u00ECnh c\u1EE7a avatar component.</p>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: [":host{display:block;width:100%;padding:16px}.demo-wrapper{background-color:#f9fafb;border-radius:8px;padding:16px;margin-bottom:16px}.code-block{font-family:monospace;background-color:#f3f4f6;border-radius:4px;padding:2px 4px;font-size:14px}button{transition:all .2s ease}button:hover{opacity:.9}button:active{transform:scale(.98)}.size-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px}.size-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.shape-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px;margin-left:8px}.shape-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.error-message{color:#ef4444;margin-top:8px;font-size:14px}.copy-button{background-color:#3b82f6;color:#fff;border-radius:4px;padding:4px 8px;font-size:14px;border:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "idGenColor", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarDemoComponent, decorators: [{
             type: Component,
@@ -81,4 +81,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgFor
                     ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component Avatar cho Angular</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-avatar</code> l\u00E0 m\u1ED9t\n        component Angular \u0111\u1EC3 hi\u1EC3n th\u1ECB avatar ng\u01B0\u1EDDi d\u00F9ng v\u1EDBi nhi\u1EC1u t\u00F9y ch\u1ECDn nh\u01B0 h\u00ECnh \u1EA3nh, ch\u1EEF c\u00E1i \u0111\u1EA7u,\n        m\u00E0u s\u1EAFc t\u1EF1 \u0111\u1ED9ng, v\u00E0 h\u1ED7 tr\u1EE3 fallback khi \u1EA3nh b\u1ECB l\u1ED7i.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar c\u01A1 b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n            [size]=\"selectedSize\"\n            [typeShape]=\"selectedShape\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi h\u00ECnh \u1EA3nh t\u1EEB URL</p>\n            <p class=\"text-sm text-gray-500\">K\u00EDch th\u01B0\u1EDBc: {{ selectedSize }}px, H\u00ECnh d\u1EA1ng: {{ selectedShape }}</p>\n          </div>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button *ngFor=\"let size of sizeOptions\"\n            (click)=\"setSize(size)\"\n            class=\"px-3 py-1 border rounded\"\n            [class.bg-blue-500]=\"selectedSize === size\"\n            [class.text-white]=\"selectedSize === size\">\n            {{ size }}px\n          </button>\n          <button (click)=\"toggleShape()\"\n            class=\"px-3 py-1 border rounded ml-4\">\n            \u0110\u1ED5i h\u00ECnh d\u1EA1ng\n          </button>\n        </div>\n      </div>\n\n      <!-- Text Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar v\u0103n b\u1EA3n</h3>\n        <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n          @for (name of userNames; track name) {\n            <libs_ui-components-avatar [textAvatar]=\"name\"\n              [idGenColor]=\"name\"\n              [size]=\"40\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u00EAn v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng d\u1EF1a tr\u00EAn ID.</p>\n      </div>\n\n      <!-- Avatar Group Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nh\u00F3m Avatar</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          @for (user of users; track user) {\n            <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n              [textAvatar]=\"user['name']\"\n              [idGenColor]=\"user['id']\"\n              [size]=\"user['size']\"\n              [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n              [classInclude]=\"'mr-2'\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Nh\u00F3m avatars v\u1EDBi k\u00EDch th\u01B0\u1EDBc kh\u00E1c nhau v\u00E0 hi\u1EC3n th\u1ECB fallback khi kh\u00F4ng c\u00F3\n          h\u00ECnh \u1EA3nh.</p>\n      </div>\n\n      <!-- Error Handling Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">X\u1EED l\u00FD l\u1ED7i</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [linkAvatarError]=\"fallbackAvatar\"\n            [textAvatar]=\"'Error Fallback'\"\n            [idGenColor]=\"'error-demo'\"\n            [size]=\"48\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi x\u1EED l\u00FD l\u1ED7i h\u00ECnh \u1EA3nh</p>\n            <p class=\"text-sm text-gray-500\">Khi h\u00ECnh \u1EA3nh ch\u00EDnh b\u1ECB l\u1ED7i, s\u1EBD hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh thay th\u1EBF.</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback to Text Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback v\u1EC1 v\u0103n b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [textAvatar]=\"'Text Fallback'\"\n            [idGenColor]=\"'text-fallback'\"\n            [size]=\"48\"\n            (outAvatarError)=\"handleAvatarError()\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi fallback v\u1EC1 v\u0103n b\u1EA3n</p>\n            <p class=\"text-sm text-gray-500\">Khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh, s\u1EBD hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u c\u1EE7a v\u0103n b\u1EA3n v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1\n              \u0111\u1ED9ng.</p>\n            @if (showErrorMessage) {\n              <p class=\"text-sm text-red-500 mt-2\">Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh. \u0110\u00E3 hi\u1EC3n th\u1ECB v\u0103n b\u1EA3n thay th\u1EBF.</p>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n  [textAvatar]=\"'Nguy\u1EC5n V\u0103n A'\"\n  [idGenColor]=\"'user-123'\"\n  [size]=\"40\"\n  [typeShape]=\"'circle'\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  // Component logic\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: X\u1EED l\u00FD s\u1EF1 ki\u1EC7n l\u1ED7i</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"user.avatar\"\n  [linkAvatarError]=\"defaultAvatar\"\n  [textAvatar]=\"user.name\"\n  [idGenColor]=\"user.id\"\n  [size]=\"40\"\n  (outAvatarError)=\"handleAvatarError()\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-error-handler',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './error-handler.component.html'\n&#125;)\nexport class ErrorHandlerComponent &#123;\n  user = &#123;\n    id: 'user-123',\n    name: 'Nguy\u1EC5n V\u0103n A',\n    avatar: 'https://example.com/avatar.jpg'\n  &#125;;\n  \n  defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n  handleAvatarError() &#123;\n    console.log('Kh\u00F4ng th\u1EC3 t\u1EA3i \u0111\u01B0\u1EE3c h\u00ECnh \u1EA3nh avatar');\n    // Th\u1EF1c hi\u1EC7n c\u00E1c x\u1EED l\u00FD kh\u00E1c khi c\u00F3 l\u1ED7i\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh avatar</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh thay th\u1EBF khi avatar ch\u00EDnh b\u1ECB l\u1ED7i\n              </td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh (th\u01B0\u1EDDng l\u00E0 ch\u1EEF c\u00E1i\n                \u0111\u1EA7u c\u1EE7a t\u00EAn)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">ID d\u00F9ng \u0111\u1EC3 t\u1EA1o m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng khi s\u1EED d\u1EE5ng v\u0103n b\u1EA3n</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n                  | 24 | 32 | 40 | 48 | 64</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">K\u00EDch th\u01B0\u1EDBc c\u1EE7a avatar (t\u00EDnh b\u1EB1ng pixel)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' | 'rectangle'</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">H\u00ECnh d\u1EA1ng c\u1EE7a avatar (tr\u00F2n ho\u1EB7c vu\u00F4ng)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho container ch\u00EDnh</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho th\u1EBB img</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">N\u1EBFu true, ch\u1EC9 l\u1EA5y ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u1EEB cu\u1ED1i c\u00F9ng trong\n                textAvatar</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">S\u1EF1 ki\u1EC7n \u0111\u01B0\u1EE3c k\u00EDch ho\u1EA1t khi linkAvatar b\u1ECB l\u1ED7i v\u00E0 kh\u00F4ng c\u00F3\n                linkAvatarError</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"bg-gray-50 p-6 rounded-lg\">\n        <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig &#123;\n  classImageInclude?: string;\n  classInclude?: string;\n  size?: TYPE_SIZE_AVATAR_CONFIG;\n  linkAvatar?: string;\n  linkAvatarError?: string;\n  idGenColor?: string;\n  textAvatar?: string;\n  typeShape?: TYPE_SHAPE_AVATAR;\n  getLastTextAfterSpace?: boolean;\n  &#125;\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';</code></pre>\n        <p class=\"text-gray-600\">Interface \u0111\u1ECBnh ngh\u0129a c\u1EA5u h\u00ECnh c\u1EE7a avatar component.</p>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: [":host{display:block;width:100%;padding:16px}.demo-wrapper{background-color:#f9fafb;border-radius:8px;padding:16px;margin-bottom:16px}.code-block{font-family:monospace;background-color:#f3f4f6;border-radius:4px;padding:2px 4px;font-size:14px}button{transition:all .2s ease}button:hover{opacity:.9}button:active{transform:scale(.98)}.size-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px}.size-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.shape-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px;margin-left:8px}.shape-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.error-message{color:#ef4444;margin-top:8px;font-size:14px}.copy-button{background-color:#3b82f6;color:#fff;border-radius:4px;padding:4px 8px;font-size:14px;border:none;cursor:pointer}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9kZW1vL2RlbW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2F2YXRhci9zcmMvZGVtby9kZW1vLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQWF0RSxNQUFNLE9BQU8sbUNBQW1DO0lBQzlDLGtCQUFrQjtJQUNsQixhQUFhLEdBQUcsZ0RBQWdELENBQUM7SUFDakUsY0FBYyxHQUFHLGdEQUFnRCxDQUFDO0lBRWxFLGdCQUFnQjtJQUNoQixXQUFXLEdBQThCLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNsRSxZQUFZLEdBQTRCLEVBQUUsQ0FBQztJQUUzQyxpQkFBaUI7SUFDakIsWUFBWSxHQUF3QixDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsQ0FBQztJQUM1RCxhQUFhLEdBQXNCLFFBQVEsQ0FBQztJQUU1QyxtQkFBbUI7SUFDbkIsU0FBUyxHQUFHO1FBQ1YsY0FBYztRQUNkLFlBQVk7UUFDWixVQUFVO1FBQ1YsWUFBWTtRQUNaLFlBQVk7UUFDWixZQUFZO0tBQ2IsQ0FBQztJQUVGLHdCQUF3QjtJQUN4QixLQUFLLEdBQUc7UUFDTjtZQUNFLEVBQUUsRUFBRSxRQUFRO1lBQ1osSUFBSSxFQUFFLGNBQWM7WUFDcEIsTUFBTSxFQUFFLGdEQUFnRDtZQUN4RCxJQUFJLEVBQUUsRUFBRTtTQUNUO1FBQ0Q7WUFDRSxFQUFFLEVBQUUsUUFBUTtZQUNaLElBQUksRUFBRSxZQUFZO1lBQ2xCLE1BQU0sRUFBRSxrREFBa0Q7WUFDMUQsSUFBSSxFQUFFLEVBQUU7U0FDVDtRQUNEO1lBQ0UsRUFBRSxFQUFFLFFBQVE7WUFDWixJQUFJLEVBQUUsVUFBVTtZQUNoQixNQUFNLEVBQUUsZ0RBQWdEO1lBQ3hELElBQUksRUFBRSxFQUFFO1NBQ1Q7UUFDRDtZQUNFLEVBQUUsRUFBRSxRQUFRO1lBQ1osSUFBSSxFQUFFLFlBQVk7WUFDbEIsTUFBTSxFQUFFLFNBQVM7WUFDakIsSUFBSSxFQUFFLEVBQUU7U0FDVDtLQUM0QixDQUFDO0lBRWhDLDBCQUEwQjtJQUMxQixlQUFlLEdBQUcsdUNBQXVDLENBQUM7SUFDMUQsZ0JBQWdCLEdBQUcsS0FBSyxDQUFDO0lBRXpCLFVBQVU7SUFDVixXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDaEYsQ0FBQztJQUVELE9BQU8sQ0FBQyxJQUE2QjtRQUNuQyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCO1FBQ2YsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQztRQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEtBQUssQ0FBQztRQUNoQyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDWCxDQUFDO0lBRUQsZUFBZSxDQUFDLElBQVk7UUFDMUIsU0FBUyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUM1QyxLQUFLLENBQUMsMkJBQTJCLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDYixPQUFPLENBQUMsS0FBSyxDQUFDLHNCQUFzQixFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQzdDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzt3R0E3RVUsbUNBQW1DOzRGQUFuQyxtQ0FBbUMsMkVDZmhELHM2bUJBd1hBLDY1QkQvV0ksK0JBQStCLDZQQUMvQixLQUFLOzs0RkFLSSxtQ0FBbUM7a0JBVi9DLFNBQVM7K0JBQ0UsaUJBQWlCLGNBQ2YsSUFBSSxXQUNQO3dCQUNQLCtCQUErQjt3QkFDL0IsS0FBSztxQkFDTiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0F2YXRhckNvbXBvbmVudCB9IGZyb20gJy4uL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgVFlQRV9TSEFQRV9BVkFUQVIsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9hdmF0YXIuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWF2YXRhci1kZW1vJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIExpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnQsXG4gICAgTmdGb3JcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZGVtby5jb21wb25lbnQuc2Nzcydcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0F2YXRhckRlbW9Db21wb25lbnQge1xuICAvLyBCYXNpYyBkZW1vIGRhdGFcbiAgZXhhbXBsZUF2YXRhciA9ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzMuanBnJztcbiAgZmFsbGJhY2tBdmF0YXIgPSAnaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS9wb3J0cmFpdHMvbGVnby82LmpwZyc7XG5cbiAgLy8gU2l6ZSB2YXJpYW50c1xuICBzaXplT3B0aW9uczogVFlQRV9TSVpFX0FWQVRBUl9DT05GSUdbXSA9IFsxNiwgMjQsIDMyLCA0MCwgNDgsIDY0XTtcbiAgc2VsZWN0ZWRTaXplOiBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRyA9IDQwO1xuXG4gIC8vIFNoYXBlIHZhcmlhbnRzXG4gIHNoYXBlT3B0aW9uczogVFlQRV9TSEFQRV9BVkFUQVJbXSA9IFsnY2lyY2xlJywgJ3JlY3RhbmdsZSddO1xuICBzZWxlY3RlZFNoYXBlOiBUWVBFX1NIQVBFX0FWQVRBUiA9ICdjaXJjbGUnO1xuXG4gIC8vIFRleHQgYXZhdGFyIGRlbW9cbiAgdXNlck5hbWVzID0gW1xuICAgICdOZ3V54buFbiBWxINuIEEnLFxuICAgICdUcuG6p24gVGjhu4sgQicsXG4gICAgJ0zDqiBWxINuIEMnLFxuICAgICdQaOG6oW0gVGjhu4sgRCcsXG4gICAgJ1bFqSBIb8OgbmcgRScsXG4gICAgJ8SQ4bq3bmcgVGjhu4sgRidcbiAgXTtcblxuICAvLyBEZW1vIGZvciBhdmF0YXIgZ3JvdXBcbiAgdXNlcnMgPSBbXG4gICAge1xuICAgICAgaWQ6ICd1c2VyLTEnLFxuICAgICAgbmFtZTogJ05ndXnhu4VuIFbEg24gQScsXG4gICAgICBhdmF0YXI6ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzIuanBnJyxcbiAgICAgIHNpemU6IDY0XG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItMicsXG4gICAgICBuYW1lOiAnVHLhuqduIFRo4buLIEInLFxuICAgICAgYXZhdGFyOiAnaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS9wb3J0cmFpdHMvd29tZW4vMzIuanBnJyxcbiAgICAgIHNpemU6IDQ4XG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItMycsXG4gICAgICBuYW1lOiAnTMOqIFbEg24gQycsXG4gICAgICBhdmF0YXI6ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzMuanBnJyxcbiAgICAgIHNpemU6IDMyXG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItNCcsXG4gICAgICBuYW1lOiAnUGjhuqFtIFRo4buLIEQnLFxuICAgICAgYXZhdGFyOiB1bmRlZmluZWQsXG4gICAgICBzaXplOiAyNFxuICAgIH1cbiAgXSBhcyBBcnJheTxSZWNvcmQ8c3RyaW5nLCBhbnk+PjtcblxuICAvLyBEZW1vIGZvciBlcnJvciBoYW5kbGluZ1xuICBpbnZhbGlkSW1hZ2VVcmwgPSAnaHR0cHM6Ly9leGFtcGxlLmNvbS9pbnZhbGlkLWltYWdlLmpwZyc7XG4gIHNob3dFcnJvck1lc3NhZ2UgPSBmYWxzZTtcblxuICAvLyBNZXRob2RzXG4gIHRvZ2dsZVNoYXBlKCkge1xuICAgIHRoaXMuc2VsZWN0ZWRTaGFwZSA9IHRoaXMuc2VsZWN0ZWRTaGFwZSA9PT0gJ2NpcmNsZScgPyAncmVjdGFuZ2xlJyA6ICdjaXJjbGUnO1xuICB9XG5cbiAgc2V0U2l6ZShzaXplOiBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRykge1xuICAgIHRoaXMuc2VsZWN0ZWRTaXplID0gc2l6ZTtcbiAgfVxuXG4gIGhhbmRsZUF2YXRhckVycm9yKCkge1xuICAgIHRoaXMuc2hvd0Vycm9yTWVzc2FnZSA9IHRydWU7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnNob3dFcnJvck1lc3NhZ2UgPSBmYWxzZTtcbiAgICB9LCAzMDAwKTtcbiAgfVxuXG4gIGNvcHlUb0NsaXBib2FyZCh0ZXh0OiBzdHJpbmcpIHtcbiAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dCh0ZXh0KS50aGVuKCgpID0+IHtcbiAgICAgIGFsZXJ0KCfEkMOjIHNhbyBjaMOpcCB2w6BvIGNsaXBib2FyZCcpO1xuICAgIH0pLmNhdGNoKGVyciA9PiB7XG4gICAgICBjb25zb2xlLmVycm9yKCdLaMO0bmcgdGjhu4Mgc2FvIGNow6lwOiAnLCBlcnIpO1xuICAgIH0pO1xuICB9XG59ICIsIjxkaXYgY2xhc3M9XCJtYXgtdy02eGwgbXgtYXV0byBwLTUgZm9udC1zYW5zIHRleHQtZ3JheS04MDBcIj5cbiAgPGhlYWRlciBjbGFzcz1cInRleHQtY2VudGVyIHB5LTEwIGJnLXdoaXRlIHJvdW5kZWQtbGcgbWItOCBzaGFkb3ctc21cIj5cbiAgICA8aDEgY2xhc3M9XCJ0ZXh0LTR4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi0yXCI+RGVtbyBBdmF0YXIgQ29tcG9uZW50PC9oMT5cbiAgICA8cCBjbGFzcz1cInRleHQteGwgdGV4dC1ncmF5LTUwMFwiPlRoxrAgdmnhu4duIGNvbXBvbmVudCBBdmF0YXIgY2hvIEFuZ3VsYXI8L3A+XG4gIDwvaGVhZGVyPlxuXG4gIDxtYWluPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWF2YXRhcjwvY29kZT4gbMOgIG3hu5l0XG4gICAgICAgIGNvbXBvbmVudCBBbmd1bGFyIMSR4buDIGhp4buDbiB0aOG7iyBhdmF0YXIgbmfGsOG7nWkgZMO5bmcgduG7m2kgbmhp4buBdSB0w7l5IGNo4buNbiBuaMawIGjDrG5oIOG6o25oLCBjaOG7ryBjw6FpIMSR4bqndSxcbiAgICAgICAgbcOgdSBz4bqvYyB04buxIMSR4buZbmcsIHbDoCBo4buXIHRy4bujIGZhbGxiYWNrIGtoaSDhuqNuaCBi4buLIGzhu5dpLlxuICAgICAgPC9wPlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi02XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5Zw6p1IGPhuqd1PC9oMz5cbiAgICAgICAgPHVsIGNsYXNzPVwibGlzdC1kaXNjIHBsLTUgc3BhY2UteS0yIHRleHQtZ3JheS02MDBcIj5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+QW5ndWxhcjwvc3Bhbj46IDE4LjAuMCB0cuG7nyBsw6puPC9saT5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+VGFpbHdpbmQgQ1NTPC9zcGFuPjogMy4zLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+xJDhu4MgY8OgaSDEkeG6t3QgdGjGsCB2aeG7h24sIHPhu60gZOG7pW5nIG5wbSBob+G6t2MgeWFybjo8L3A+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1hdmF0YXI8L2NvZGU+PC9wcmU+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJtbC00IHB4LTMgcHktMSBiZy1ibHVlLTUwMCB0ZXh0LXdoaXRlIHJvdW5kZWQgaG92ZXI6YmctYmx1ZS02MDAgdHJhbnNpdGlvbi1jb2xvcnNcIlxuICAgICAgICAgIChjbGljayk9XCJjb3B5VG9DbGlwYm9hcmQoJ25wbSBpbnN0YWxsIEBsaWJzLXVpL2NvbXBvbmVudHMtYXZhdGFyJylcIj5cbiAgICAgICAgICBTYW8gY2jDqXBcbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+SG/hurdjIHbhu5tpIHlhcm46PC9wPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgbWItNlwiPlxuICAgICAgICA8cHJlIGNsYXNzPVwiZmxleC0xIHRleHQtc20gb3ZlcmZsb3cteC1hdXRvXCI+PGNvZGU+eWFybiBhZGQgJiM2NDtsaWJzLXVpL2NvbXBvbmVudHMtYXZhdGFyPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCJcbiAgICAgICAgICAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWF2YXRhcicpXCI+XG4gICAgICAgICAgU2FvIGNow6lwXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPHNlY3Rpb24gY2xhc3M9XCJiZy13aGl0ZSByb3VuZGVkLWxnIHAtOCBtYi04IHNoYWRvdy1zbVwiPlxuICAgICAgPGgyIGNsYXNzPVwidGV4dC0yeGwgZm9udC1ib2xkIHRleHQtZ3JheS04MDAgbWItNSBwYi0zIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPkRlbW8gdHLhu7FjIHRp4bq/cDwvaDI+XG5cbiAgICAgIDwhLS0gQmFzaWMgQXZhdGFyIERlbW8gLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+QXZhdGFyIGPGoSBi4bqjbjwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBwLTQgYmctZ3JheS01MCByb3VuZGVkLWxnXCI+XG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1hdmF0YXIgW2xpbmtBdmF0YXJdPVwiZXhhbXBsZUF2YXRhclwiXG4gICAgICAgICAgICBbc2l6ZV09XCJzZWxlY3RlZFNpemVcIlxuICAgICAgICAgICAgW3R5cGVTaGFwZV09XCJzZWxlY3RlZFNoYXBlXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS03MDBcIj5BdmF0YXIgduG7m2kgaMOsbmgg4bqjbmggdOG7qyBVUkw8L3A+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtc20gdGV4dC1ncmF5LTUwMFwiPkvDrWNoIHRoxrDhu5tjOiB7eyBzZWxlY3RlZFNpemUgfX1weCwgSMOsbmggZOG6oW5nOiB7eyBzZWxlY3RlZFNoYXBlIH19PC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm10LTQgZmxleCBmbGV4LXdyYXAgZ2FwLTNcIj5cbiAgICAgICAgICA8YnV0dG9uICpuZ0Zvcj1cImxldCBzaXplIG9mIHNpemVPcHRpb25zXCJcbiAgICAgICAgICAgIChjbGljayk9XCJzZXRTaXplKHNpemUpXCJcbiAgICAgICAgICAgIGNsYXNzPVwicHgtMyBweS0xIGJvcmRlciByb3VuZGVkXCJcbiAgICAgICAgICAgIFtjbGFzcy5iZy1ibHVlLTUwMF09XCJzZWxlY3RlZFNpemUgPT09IHNpemVcIlxuICAgICAgICAgICAgW2NsYXNzLnRleHQtd2hpdGVdPVwic2VsZWN0ZWRTaXplID09PSBzaXplXCI+XG4gICAgICAgICAgICB7eyBzaXplIH19cHhcbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8YnV0dG9uIChjbGljayk9XCJ0b2dnbGVTaGFwZSgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwicHgtMyBweS0xIGJvcmRlciByb3VuZGVkIG1sLTRcIj5cbiAgICAgICAgICAgIMSQ4buVaSBow6xuaCBk4bqhbmdcbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBUZXh0IEF2YXRhciBEZW1vIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkF2YXRhciB2xINuIGLhuqNuPC9oMz5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC13cmFwIGdhcC0zIHAtNCBiZy1ncmF5LTUwIHJvdW5kZWQtbGdcIj5cbiAgICAgICAgICBAZm9yIChuYW1lIG9mIHVzZXJOYW1lczsgdHJhY2sgbmFtZSkge1xuICAgICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1hdmF0YXIgW3RleHRBdmF0YXJdPVwibmFtZVwiXG4gICAgICAgICAgICAgIFtpZEdlbkNvbG9yXT1cIm5hbWVcIlxuICAgICAgICAgICAgICBbc2l6ZV09XCI0MFwiPlxuICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxwIGNsYXNzPVwibXQtMiB0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5IaeG7g24gdGjhu4sgY2jhu68gY8OhaSDEkeG6p3UgdGnDqm4gY+G7p2EgdMOqbiB24bubaSBtw6B1IG7hu4FuIHThu7EgxJHhu5luZyBk4buxYSB0csOqbiBJRC48L3A+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBBdmF0YXIgR3JvdXAgRGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5OaMOzbSBBdmF0YXI8L2gzPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgcC00IGJnLWdyYXktNTAgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgIEBmb3IgKHVzZXIgb2YgdXNlcnM7IHRyYWNrIHVzZXIpIHtcbiAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyIFtsaW5rQXZhdGFyXT1cInVzZXJbJ2F2YXRhciddXCJcbiAgICAgICAgICAgICAgW3RleHRBdmF0YXJdPVwidXNlclsnbmFtZSddXCJcbiAgICAgICAgICAgICAgW2lkR2VuQ29sb3JdPVwidXNlclsnaWQnXVwiXG4gICAgICAgICAgICAgIFtzaXplXT1cInVzZXJbJ3NpemUnXVwiXG4gICAgICAgICAgICAgIFt0eXBlU2hhcGVdPVwidXNlclsnaWQnXSA9PT0gJ3VzZXItNCcgPyAncmVjdGFuZ2xlJyA6ICdjaXJjbGUnXCJcbiAgICAgICAgICAgICAgW2NsYXNzSW5jbHVkZV09XCInbXItMidcIj5cbiAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWF2YXRhcj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8cCBjbGFzcz1cIm10LTIgdGV4dC1zbSB0ZXh0LWdyYXktNTAwXCI+TmjDs20gYXZhdGFycyB24bubaSBrw61jaCB0aMaw4bubYyBraMOhYyBuaGF1IHbDoCBoaeG7g24gdGjhu4sgZmFsbGJhY2sga2hpIGtow7RuZyBjw7NcbiAgICAgICAgICBow6xuaCDhuqNuaC48L3A+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBFcnJvciBIYW5kbGluZyBEZW1vIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPljhu60gbMO9IGzhu5dpPC9oMz5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIHAtNCBiZy1ncmF5LTUwIHJvdW5kZWQtbGdcIj5cbiAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWF2YXRhciBbbGlua0F2YXRhcl09XCJpbnZhbGlkSW1hZ2VVcmxcIlxuICAgICAgICAgICAgW2xpbmtBdmF0YXJFcnJvcl09XCJmYWxsYmFja0F2YXRhclwiXG4gICAgICAgICAgICBbdGV4dEF2YXRhcl09XCInRXJyb3IgRmFsbGJhY2snXCJcbiAgICAgICAgICAgIFtpZEdlbkNvbG9yXT1cIidlcnJvci1kZW1vJ1wiXG4gICAgICAgICAgICBbc2l6ZV09XCI0OFwiPlxuICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWF2YXRhcj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LWdyYXktNzAwXCI+QXZhdGFyIHbhu5tpIHjhu60gbMO9IGzhu5dpIGjDrG5oIOG6o25oPC9wPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5LaGkgaMOsbmgg4bqjbmggY2jDrW5oIGLhu4sgbOG7l2ksIHPhur0gaGnhu4NuIHRo4buLIGjDrG5oIOG6o25oIHRoYXkgdGjhur8uPC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8IS0tIEZhbGxiYWNrIHRvIFRleHQgRGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5GYWxsYmFjayB24buBIHbEg24gYuG6o248L2gzPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgcC00IGJnLWdyYXktNTAgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyIFtsaW5rQXZhdGFyXT1cImludmFsaWRJbWFnZVVybFwiXG4gICAgICAgICAgICBbdGV4dEF2YXRhcl09XCInVGV4dCBGYWxsYmFjaydcIlxuICAgICAgICAgICAgW2lkR2VuQ29sb3JdPVwiJ3RleHQtZmFsbGJhY2snXCJcbiAgICAgICAgICAgIFtzaXplXT1cIjQ4XCJcbiAgICAgICAgICAgIChvdXRBdmF0YXJFcnJvcik9XCJoYW5kbGVBdmF0YXJFcnJvcigpXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS03MDBcIj5BdmF0YXIgduG7m2kgZmFsbGJhY2sgduG7gSB2xINuIGLhuqNuPC9wPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5LaGkga2jDtG5nIGPDsyBow6xuaCDhuqNuaCwgc+G6vSBoaeG7g24gdGjhu4sgY2jhu68gY8OhaSDEkeG6p3UgY+G7p2EgdsSDbiBi4bqjbiB24bubaSBtw6B1IG7hu4FuIHThu7FcbiAgICAgICAgICAgICAgxJHhu5luZy48L3A+XG4gICAgICAgICAgICBAaWYgKHNob3dFcnJvck1lc3NhZ2UpIHtcbiAgICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtcmVkLTUwMCBtdC0yXCI+S2jDtG5nIHRo4buDIHThuqNpIGjDrG5oIOG6o25oLiDEkMOjIGhp4buDbiB0aOG7iyB2xINuIGLhuqNuIHRoYXkgdGjhur8uPC9wPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6FjaCBz4butIGThu6VuZzwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5Dw6FjaCAxOiBT4butIGThu6VuZyBmaWxlIEhUTUwgcmnDqm5nIGJp4buHdDwvaDM+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTEgbWQ6Z3JpZC1jb2xzLTIgZ2FwLTYgbWItNFwiPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPkhUTUwgKGV4YW1wbGUuY29tcG9uZW50Lmh0bWwpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPiZsdDtsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyXG4gIFtsaW5rQXZhdGFyXT1cIidodHRwczovL2V4YW1wbGUuY29tL2F2YXRhci5qcGcnXCJcbiAgW3RleHRBdmF0YXJdPVwiJ05ndXnhu4VuIFbEg24gQSdcIlxuICBbaWRHZW5Db2xvcl09XCIndXNlci0xMjMnXCJcbiAgW3NpemVdPVwiNDBcIlxuICBbdHlwZVNoYXBlXT1cIidjaXJjbGUnXCImZ3Q7XG4mbHQ7L2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXImZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAoZXhhbXBsZS5jb21wb25lbnQudHMpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPmltcG9ydCAmIzEyMzsgQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2FuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJiMxMjM7IExpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnQgJiMxMjU7IGZyb20gJyYjNjQ7bGlicy11aS9jb21wb25lbnRzLWF2YXRhcic7XG5cbiYjNjQ7Q29tcG9uZW50KCYjMTIzO1xuICBzZWxlY3RvcjogJ2FwcC1leGFtcGxlJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0xpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBFeGFtcGxlQ29tcG9uZW50ICYjMTIzO1xuICAvLyBDb21wb25lbnQgbG9naWNcbiYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkPDoWNoIDI6IFjhu60gbMO9IHPhu7Ega2nhu4duIGzhu5dpPC9oMz5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMSBtZDpncmlkLWNvbHMtMiBnYXAtNiBtYi00XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+SFRNTCAoZXJyb3ItaGFuZGxlci5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXJcbiAgW2xpbmtBdmF0YXJdPVwidXNlci5hdmF0YXJcIlxuICBbbGlua0F2YXRhckVycm9yXT1cImRlZmF1bHRBdmF0YXJcIlxuICBbdGV4dEF2YXRhcl09XCJ1c2VyLm5hbWVcIlxuICBbaWRHZW5Db2xvcl09XCJ1c2VyLmlkXCJcbiAgW3NpemVdPVwiNDBcIlxuICAob3V0QXZhdGFyRXJyb3IpPVwiaGFuZGxlQXZhdGFyRXJyb3IoKVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyJmd0OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPlR5cGVTY3JpcHQgKGVycm9yLWhhbmRsZXIuY29tcG9uZW50LnRzKTwvaDQ+XG4gICAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT5pbXBvcnQgJiMxMjM7IENvbXBvbmVudCAmIzEyNTsgZnJvbSAnJiM2NDthbmd1bGFyL2NvcmUnO1xuaW1wb3J0ICYjMTIzOyBMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1hdmF0YXInO1xuXG4mIzY0O0NvbXBvbmVudCgmIzEyMztcbiAgc2VsZWN0b3I6ICdhcHAtZXJyb3ItaGFuZGxlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Vycm9yLWhhbmRsZXIuY29tcG9uZW50Lmh0bWwnXG4mIzEyNTspXG5leHBvcnQgY2xhc3MgRXJyb3JIYW5kbGVyQ29tcG9uZW50ICYjMTIzO1xuICB1c2VyID0gJiMxMjM7XG4gICAgaWQ6ICd1c2VyLTEyMycsXG4gICAgbmFtZTogJ05ndXnhu4VuIFbEg24gQScsXG4gICAgYXZhdGFyOiAnaHR0cHM6Ly9leGFtcGxlLmNvbS9hdmF0YXIuanBnJ1xuICAmIzEyNTs7XG4gIFxuICBkZWZhdWx0QXZhdGFyID0gJ2h0dHBzOi8vZXhhbXBsZS5jb20vZGVmYXVsdC1hdmF0YXIuanBnJztcblxuICBoYW5kbGVBdmF0YXJFcnJvcigpICYjMTIzO1xuICAgIGNvbnNvbGUubG9nKCdLaMO0bmcgdGjhu4MgdOG6o2kgxJHGsOG7o2MgaMOsbmgg4bqjbmggYXZhdGFyJyk7XG4gICAgLy8gVGjhu7FjIGhp4buHbiBjw6FjIHjhu60gbMO9IGtow6FjIGtoaSBjw7MgbOG7l2lcbiAgJiMxMjU7XG4mIzEyNTs8L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPHNlY3Rpb24gY2xhc3M9XCJiZy13aGl0ZSByb3VuZGVkLWxnIHAtOCBtYi04IHNoYWRvdy1zbVwiPlxuICAgICAgPGgyIGNsYXNzPVwidGV4dC0yeGwgZm9udC1ib2xkIHRleHQtZ3JheS04MDAgbWItNSBwYi0zIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPlTDoGkgbGnhu4d1IEFQSTwvaDI+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5JbnB1dHM8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cIm92ZXJmbG93LXgtYXV0byBtYi04XCI+XG4gICAgICAgIDx0YWJsZSBjbGFzcz1cIm1pbi13LWZ1bGwgYmctd2hpdGUgYm9yZGVyIGJvcmRlci1ncmF5LTIwMFwiPlxuICAgICAgICAgIDx0aGVhZD5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRoIGNsYXNzPVwicHktMyBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy1ncmF5LTEwMCB0ZXh0LWxlZnQgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwXCI+VMOqbjwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPktp4buDdSBk4buvXG4gICAgICAgICAgICAgICAgbGnhu4d1PC90aD5cbiAgICAgICAgICAgICAgPHRoIGNsYXNzPVwicHktMyBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy1ncmF5LTEwMCB0ZXh0LWxlZnQgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwXCI+TeG6t2MgxJHhu4tuaFxuICAgICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5Nw7QgdOG6o1xuICAgICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3RoZWFkPlxuICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+bGlua0F2YXRhcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5zdHJpbmc8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPi08L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+xJDGsOG7nW5nIGThuqtuIGPhu6dhIGjDrG5oIOG6o25oIGF2YXRhcjwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5saW5rQXZhdGFyRXJyb3I8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c3RyaW5nPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj4tPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPsSQxrDhu51uZyBk4bqrbiBj4bunYSBow6xuaCDhuqNuaCB0aGF5IHRo4bq/IGtoaSBhdmF0YXIgY2jDrW5oIGLhu4sgbOG7l2lcbiAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnRleHRBdmF0YXI8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c3RyaW5nPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj4tPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPlbEg24gYuG6o24gaGnhu4NuIHRo4buLIGtoaSBraMO0bmcgY8OzIGjDrG5oIOG6o25oICh0aMaw4budbmcgbMOgIGNo4buvIGPDoWlcbiAgICAgICAgICAgICAgICDEkeG6p3UgY+G7p2EgdMOqbik8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+aWRHZW5Db2xvcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5zdHJpbmc8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPi08L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+SUQgZMO5bmcgxJHhu4MgdOG6oW8gbcOgdSBu4buBbiB04buxIMSR4buZbmcga2hpIHPhu60gZOG7pW5nIHbEg24gYuG6o248L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c2l6ZTwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPjE2XG4gICAgICAgICAgICAgICAgICB8IDI0IHwgMzIgfCA0MCB8IDQ4IHwgNjQ8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjMyPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPkvDrWNoIHRoxrDhu5tjIGPhu6dhIGF2YXRhciAodMOtbmggYuG6sW5nIHBpeGVsKTwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj50eXBlU2hhcGU8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+J2NpcmNsZScgfCAncmVjdGFuZ2xlJzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+J2NpcmNsZSc8L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+SMOsbmggZOG6oW5nIGPhu6dhIGF2YXRhciAodHLDsm4gaG/hurdjIHZ1w7RuZyk8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+Y2xhc3NJbmNsdWRlPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnN0cmluZzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+J21yLVs4cHhdJzwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5DU1MgY2xhc3MgYuG7lSBzdW5nIGNobyBjb250YWluZXIgY2jDrW5oPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPmNsYXNzSW1hZ2VJbmNsdWRlPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnN0cmluZzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Jyc8L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Q1NTIGNsYXNzIGLhu5Ugc3VuZyBjaG8gdGjhursgaW1nPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPmdldExhc3RUZXh0QWZ0ZXJTcGFjZTwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5ib29sZWFuPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5mYWxzZTwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5O4bq/dSB0cnVlLCBjaOG7iSBs4bqleSBjaOG7ryBjw6FpIMSR4bqndSB0acOqbiBj4bunYSB04burIGN14buRaSBjw7luZyB0cm9uZ1xuICAgICAgICAgICAgICAgIHRleHRBdmF0YXI8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5PdXRwdXRzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItOFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3UgZOG7r1xuICAgICAgICAgICAgICAgIGxp4buHdTwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPk3DtCB04bqjXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5vdXRBdmF0YXJFcnJvcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj52b2lkPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5T4buxIGtp4buHbiDEkcaw4bujYyBrw61jaCBob+G6oXQga2hpIGxpbmtBdmF0YXIgYuG7iyBs4buXaSB2w6Aga2jDtG5nIGPDs1xuICAgICAgICAgICAgICAgIGxpbmtBdmF0YXJFcnJvcjwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvdGFibGU+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkludGVyZmFjZXM8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cImJnLWdyYXktNTAgcC02IHJvdW5kZWQtbGdcIj5cbiAgICAgICAgPGg0IGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPklBdmF0YXJDb25maWc8L2g0PlxuICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPmV4cG9ydCBpbnRlcmZhY2UgSUF2YXRhckNvbmZpZyAmIzEyMztcbiAgY2xhc3NJbWFnZUluY2x1ZGU/OiBzdHJpbmc7XG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgc2l6ZT86IFRZUEVfU0laRV9BVkFUQVJfQ09ORklHO1xuICBsaW5rQXZhdGFyPzogc3RyaW5nO1xuICBsaW5rQXZhdGFyRXJyb3I/OiBzdHJpbmc7XG4gIGlkR2VuQ29sb3I/OiBzdHJpbmc7XG4gIHRleHRBdmF0YXI/OiBzdHJpbmc7XG4gIHR5cGVTaGFwZT86IFRZUEVfU0hBUEVfQVZBVEFSO1xuICBnZXRMYXN0VGV4dEFmdGVyU3BhY2U/OiBib29sZWFuO1xuICAmIzEyNTtcblxuZXhwb3J0IHR5cGUgVFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgPSAxNiB8IDI0IHwgMzIgfCA0MCB8IDQ4IHwgNjQ7XG5leHBvcnQgdHlwZSBUWVBFX1NIQVBFX0FWQVRBUiA9ICdjaXJjbGUnIHwgJ3JlY3RhbmdsZSc7PC9jb2RlPjwvcHJlPlxuICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS02MDBcIj5JbnRlcmZhY2UgxJHhu4tuaCBuZ2jEqWEgY+G6pXUgaMOsbmggY+G7p2EgYXZhdGFyIGNvbXBvbmVudC48L3A+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG4gIDwvbWFpbj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXZhdGFyL3NyYy9kZW1vL2RlbW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2F2YXRhci9zcmMvZGVtby9kZW1vLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQWF0RSxNQUFNLE9BQU8sbUNBQW1DO0lBQzlDLGtCQUFrQjtJQUNsQixhQUFhLEdBQUcsZ0RBQWdELENBQUM7SUFDakUsY0FBYyxHQUFHLGdEQUFnRCxDQUFDO0lBRWxFLGdCQUFnQjtJQUNoQixXQUFXLEdBQThCLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNsRSxZQUFZLEdBQTRCLEVBQUUsQ0FBQztJQUUzQyxpQkFBaUI7SUFDakIsWUFBWSxHQUF3QixDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsQ0FBQztJQUM1RCxhQUFhLEdBQXNCLFFBQVEsQ0FBQztJQUU1QyxtQkFBbUI7SUFDbkIsU0FBUyxHQUFHO1FBQ1YsY0FBYztRQUNkLFlBQVk7UUFDWixVQUFVO1FBQ1YsWUFBWTtRQUNaLFlBQVk7UUFDWixZQUFZO0tBQ2IsQ0FBQztJQUVGLHdCQUF3QjtJQUN4QixLQUFLLEdBQUc7UUFDTjtZQUNFLEVBQUUsRUFBRSxRQUFRO1lBQ1osSUFBSSxFQUFFLGNBQWM7WUFDcEIsTUFBTSxFQUFFLGdEQUFnRDtZQUN4RCxJQUFJLEVBQUUsRUFBRTtTQUNUO1FBQ0Q7WUFDRSxFQUFFLEVBQUUsUUFBUTtZQUNaLElBQUksRUFBRSxZQUFZO1lBQ2xCLE1BQU0sRUFBRSxrREFBa0Q7WUFDMUQsSUFBSSxFQUFFLEVBQUU7U0FDVDtRQUNEO1lBQ0UsRUFBRSxFQUFFLFFBQVE7WUFDWixJQUFJLEVBQUUsVUFBVTtZQUNoQixNQUFNLEVBQUUsZ0RBQWdEO1lBQ3hELElBQUksRUFBRSxFQUFFO1NBQ1Q7UUFDRDtZQUNFLEVBQUUsRUFBRSxRQUFRO1lBQ1osSUFBSSxFQUFFLFlBQVk7WUFDbEIsTUFBTSxFQUFFLFNBQVM7WUFDakIsSUFBSSxFQUFFLEVBQUU7U0FDVDtLQUM0QixDQUFDO0lBRWhDLDBCQUEwQjtJQUMxQixlQUFlLEdBQUcsdUNBQXVDLENBQUM7SUFDMUQsZ0JBQWdCLEdBQUcsS0FBSyxDQUFDO0lBRXpCLFVBQVU7SUFDVixXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDaEYsQ0FBQztJQUVELE9BQU8sQ0FBQyxJQUE2QjtRQUNuQyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCO1FBQ2YsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQztRQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEtBQUssQ0FBQztRQUNoQyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDWCxDQUFDO0lBRUQsZUFBZSxDQUFDLElBQVk7UUFDMUIsU0FBUyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUM1QyxLQUFLLENBQUMsMkJBQTJCLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDYixPQUFPLENBQUMsS0FBSyxDQUFDLHNCQUFzQixFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQzdDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzt3R0E3RVUsbUNBQW1DOzRGQUFuQyxtQ0FBbUMsMkVDZmhELHM2bUJBd1hBLDY1QkQvV0ksK0JBQStCLHdXQUMvQixLQUFLOzs0RkFLSSxtQ0FBbUM7a0JBVi9DLFNBQVM7K0JBQ0UsaUJBQWlCLGNBQ2YsSUFBSSxXQUNQO3dCQUNQLCtCQUErQjt3QkFDL0IsS0FBSztxQkFDTiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0F2YXRhckNvbXBvbmVudCB9IGZyb20gJy4uL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgVFlQRV9TSEFQRV9BVkFUQVIsIFRZUEVfU0laRV9BVkFUQVJfQ09ORklHIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9hdmF0YXIuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWF2YXRhci1kZW1vJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIExpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnQsXG4gICAgTmdGb3JcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZGVtby5jb21wb25lbnQuc2Nzcydcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0F2YXRhckRlbW9Db21wb25lbnQge1xuICAvLyBCYXNpYyBkZW1vIGRhdGFcbiAgZXhhbXBsZUF2YXRhciA9ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzMuanBnJztcbiAgZmFsbGJhY2tBdmF0YXIgPSAnaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS9wb3J0cmFpdHMvbGVnby82LmpwZyc7XG5cbiAgLy8gU2l6ZSB2YXJpYW50c1xuICBzaXplT3B0aW9uczogVFlQRV9TSVpFX0FWQVRBUl9DT05GSUdbXSA9IFsxNiwgMjQsIDMyLCA0MCwgNDgsIDY0XTtcbiAgc2VsZWN0ZWRTaXplOiBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRyA9IDQwO1xuXG4gIC8vIFNoYXBlIHZhcmlhbnRzXG4gIHNoYXBlT3B0aW9uczogVFlQRV9TSEFQRV9BVkFUQVJbXSA9IFsnY2lyY2xlJywgJ3JlY3RhbmdsZSddO1xuICBzZWxlY3RlZFNoYXBlOiBUWVBFX1NIQVBFX0FWQVRBUiA9ICdjaXJjbGUnO1xuXG4gIC8vIFRleHQgYXZhdGFyIGRlbW9cbiAgdXNlck5hbWVzID0gW1xuICAgICdOZ3V54buFbiBWxINuIEEnLFxuICAgICdUcuG6p24gVGjhu4sgQicsXG4gICAgJ0zDqiBWxINuIEMnLFxuICAgICdQaOG6oW0gVGjhu4sgRCcsXG4gICAgJ1bFqSBIb8OgbmcgRScsXG4gICAgJ8SQ4bq3bmcgVGjhu4sgRidcbiAgXTtcblxuICAvLyBEZW1vIGZvciBhdmF0YXIgZ3JvdXBcbiAgdXNlcnMgPSBbXG4gICAge1xuICAgICAgaWQ6ICd1c2VyLTEnLFxuICAgICAgbmFtZTogJ05ndXnhu4VuIFbEg24gQScsXG4gICAgICBhdmF0YXI6ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzIuanBnJyxcbiAgICAgIHNpemU6IDY0XG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItMicsXG4gICAgICBuYW1lOiAnVHLhuqduIFRo4buLIEInLFxuICAgICAgYXZhdGFyOiAnaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS9wb3J0cmFpdHMvd29tZW4vMzIuanBnJyxcbiAgICAgIHNpemU6IDQ4XG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItMycsXG4gICAgICBuYW1lOiAnTMOqIFbEg24gQycsXG4gICAgICBhdmF0YXI6ICdodHRwczovL3JhbmRvbXVzZXIubWUvYXBpL3BvcnRyYWl0cy9tZW4vMzMuanBnJyxcbiAgICAgIHNpemU6IDMyXG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogJ3VzZXItNCcsXG4gICAgICBuYW1lOiAnUGjhuqFtIFRo4buLIEQnLFxuICAgICAgYXZhdGFyOiB1bmRlZmluZWQsXG4gICAgICBzaXplOiAyNFxuICAgIH1cbiAgXSBhcyBBcnJheTxSZWNvcmQ8c3RyaW5nLCBhbnk+PjtcblxuICAvLyBEZW1vIGZvciBlcnJvciBoYW5kbGluZ1xuICBpbnZhbGlkSW1hZ2VVcmwgPSAnaHR0cHM6Ly9leGFtcGxlLmNvbS9pbnZhbGlkLWltYWdlLmpwZyc7XG4gIHNob3dFcnJvck1lc3NhZ2UgPSBmYWxzZTtcblxuICAvLyBNZXRob2RzXG4gIHRvZ2dsZVNoYXBlKCkge1xuICAgIHRoaXMuc2VsZWN0ZWRTaGFwZSA9IHRoaXMuc2VsZWN0ZWRTaGFwZSA9PT0gJ2NpcmNsZScgPyAncmVjdGFuZ2xlJyA6ICdjaXJjbGUnO1xuICB9XG5cbiAgc2V0U2l6ZShzaXplOiBUWVBFX1NJWkVfQVZBVEFSX0NPTkZJRykge1xuICAgIHRoaXMuc2VsZWN0ZWRTaXplID0gc2l6ZTtcbiAgfVxuXG4gIGhhbmRsZUF2YXRhckVycm9yKCkge1xuICAgIHRoaXMuc2hvd0Vycm9yTWVzc2FnZSA9IHRydWU7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnNob3dFcnJvck1lc3NhZ2UgPSBmYWxzZTtcbiAgICB9LCAzMDAwKTtcbiAgfVxuXG4gIGNvcHlUb0NsaXBib2FyZCh0ZXh0OiBzdHJpbmcpIHtcbiAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dCh0ZXh0KS50aGVuKCgpID0+IHtcbiAgICAgIGFsZXJ0KCfEkMOjIHNhbyBjaMOpcCB2w6BvIGNsaXBib2FyZCcpO1xuICAgIH0pLmNhdGNoKGVyciA9PiB7XG4gICAgICBjb25zb2xlLmVycm9yKCdLaMO0bmcgdGjhu4Mgc2FvIGNow6lwOiAnLCBlcnIpO1xuICAgIH0pO1xuICB9XG59ICIsIjxkaXYgY2xhc3M9XCJtYXgtdy02eGwgbXgtYXV0byBwLTUgZm9udC1zYW5zIHRleHQtZ3JheS04MDBcIj5cbiAgPGhlYWRlciBjbGFzcz1cInRleHQtY2VudGVyIHB5LTEwIGJnLXdoaXRlIHJvdW5kZWQtbGcgbWItOCBzaGFkb3ctc21cIj5cbiAgICA8aDEgY2xhc3M9XCJ0ZXh0LTR4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi0yXCI+RGVtbyBBdmF0YXIgQ29tcG9uZW50PC9oMT5cbiAgICA8cCBjbGFzcz1cInRleHQteGwgdGV4dC1ncmF5LTUwMFwiPlRoxrAgdmnhu4duIGNvbXBvbmVudCBBdmF0YXIgY2hvIEFuZ3VsYXI8L3A+XG4gIDwvaGVhZGVyPlxuXG4gIDxtYWluPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWF2YXRhcjwvY29kZT4gbMOgIG3hu5l0XG4gICAgICAgIGNvbXBvbmVudCBBbmd1bGFyIMSR4buDIGhp4buDbiB0aOG7iyBhdmF0YXIgbmfGsOG7nWkgZMO5bmcgduG7m2kgbmhp4buBdSB0w7l5IGNo4buNbiBuaMawIGjDrG5oIOG6o25oLCBjaOG7ryBjw6FpIMSR4bqndSxcbiAgICAgICAgbcOgdSBz4bqvYyB04buxIMSR4buZbmcsIHbDoCBo4buXIHRy4bujIGZhbGxiYWNrIGtoaSDhuqNuaCBi4buLIGzhu5dpLlxuICAgICAgPC9wPlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi02XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5Zw6p1IGPhuqd1PC9oMz5cbiAgICAgICAgPHVsIGNsYXNzPVwibGlzdC1kaXNjIHBsLTUgc3BhY2UteS0yIHRleHQtZ3JheS02MDBcIj5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+QW5ndWxhcjwvc3Bhbj46IDE4LjAuMCB0cuG7nyBsw6puPC9saT5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+VGFpbHdpbmQgQ1NTPC9zcGFuPjogMy4zLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+xJDhu4MgY8OgaSDEkeG6t3QgdGjGsCB2aeG7h24sIHPhu60gZOG7pW5nIG5wbSBob+G6t2MgeWFybjo8L3A+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1hdmF0YXI8L2NvZGU+PC9wcmU+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJtbC00IHB4LTMgcHktMSBiZy1ibHVlLTUwMCB0ZXh0LXdoaXRlIHJvdW5kZWQgaG92ZXI6YmctYmx1ZS02MDAgdHJhbnNpdGlvbi1jb2xvcnNcIlxuICAgICAgICAgIChjbGljayk9XCJjb3B5VG9DbGlwYm9hcmQoJ25wbSBpbnN0YWxsIEBsaWJzLXVpL2NvbXBvbmVudHMtYXZhdGFyJylcIj5cbiAgICAgICAgICBTYW8gY2jDqXBcbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+SG/hurdjIHbhu5tpIHlhcm46PC9wPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgbWItNlwiPlxuICAgICAgICA8cHJlIGNsYXNzPVwiZmxleC0xIHRleHQtc20gb3ZlcmZsb3cteC1hdXRvXCI+PGNvZGU+eWFybiBhZGQgJiM2NDtsaWJzLXVpL2NvbXBvbmVudHMtYXZhdGFyPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCJcbiAgICAgICAgICAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWF2YXRhcicpXCI+XG4gICAgICAgICAgU2FvIGNow6lwXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPHNlY3Rpb24gY2xhc3M9XCJiZy13aGl0ZSByb3VuZGVkLWxnIHAtOCBtYi04IHNoYWRvdy1zbVwiPlxuICAgICAgPGgyIGNsYXNzPVwidGV4dC0yeGwgZm9udC1ib2xkIHRleHQtZ3JheS04MDAgbWItNSBwYi0zIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPkRlbW8gdHLhu7FjIHRp4bq/cDwvaDI+XG5cbiAgICAgIDwhLS0gQmFzaWMgQXZhdGFyIERlbW8gLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+QXZhdGFyIGPGoSBi4bqjbjwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBwLTQgYmctZ3JheS01MCByb3VuZGVkLWxnXCI+XG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1hdmF0YXIgW2xpbmtBdmF0YXJdPVwiZXhhbXBsZUF2YXRhclwiXG4gICAgICAgICAgICBbc2l6ZV09XCJzZWxlY3RlZFNpemVcIlxuICAgICAgICAgICAgW3R5cGVTaGFwZV09XCJzZWxlY3RlZFNoYXBlXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS03MDBcIj5BdmF0YXIgduG7m2kgaMOsbmgg4bqjbmggdOG7qyBVUkw8L3A+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtc20gdGV4dC1ncmF5LTUwMFwiPkvDrWNoIHRoxrDhu5tjOiB7eyBzZWxlY3RlZFNpemUgfX1weCwgSMOsbmggZOG6oW5nOiB7eyBzZWxlY3RlZFNoYXBlIH19PC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm10LTQgZmxleCBmbGV4LXdyYXAgZ2FwLTNcIj5cbiAgICAgICAgICA8YnV0dG9uICpuZ0Zvcj1cImxldCBzaXplIG9mIHNpemVPcHRpb25zXCJcbiAgICAgICAgICAgIChjbGljayk9XCJzZXRTaXplKHNpemUpXCJcbiAgICAgICAgICAgIGNsYXNzPVwicHgtMyBweS0xIGJvcmRlciByb3VuZGVkXCJcbiAgICAgICAgICAgIFtjbGFzcy5iZy1ibHVlLTUwMF09XCJzZWxlY3RlZFNpemUgPT09IHNpemVcIlxuICAgICAgICAgICAgW2NsYXNzLnRleHQtd2hpdGVdPVwic2VsZWN0ZWRTaXplID09PSBzaXplXCI+XG4gICAgICAgICAgICB7eyBzaXplIH19cHhcbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8YnV0dG9uIChjbGljayk9XCJ0b2dnbGVTaGFwZSgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwicHgtMyBweS0xIGJvcmRlciByb3VuZGVkIG1sLTRcIj5cbiAgICAgICAgICAgIMSQ4buVaSBow6xuaCBk4bqhbmdcbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBUZXh0IEF2YXRhciBEZW1vIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkF2YXRhciB2xINuIGLhuqNuPC9oMz5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC13cmFwIGdhcC0zIHAtNCBiZy1ncmF5LTUwIHJvdW5kZWQtbGdcIj5cbiAgICAgICAgICBAZm9yIChuYW1lIG9mIHVzZXJOYW1lczsgdHJhY2sgbmFtZSkge1xuICAgICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1hdmF0YXIgW3RleHRBdmF0YXJdPVwibmFtZVwiXG4gICAgICAgICAgICAgIFtpZEdlbkNvbG9yXT1cIm5hbWVcIlxuICAgICAgICAgICAgICBbc2l6ZV09XCI0MFwiPlxuICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxwIGNsYXNzPVwibXQtMiB0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5IaeG7g24gdGjhu4sgY2jhu68gY8OhaSDEkeG6p3UgdGnDqm4gY+G7p2EgdMOqbiB24bubaSBtw6B1IG7hu4FuIHThu7EgxJHhu5luZyBk4buxYSB0csOqbiBJRC48L3A+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBBdmF0YXIgR3JvdXAgRGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5OaMOzbSBBdmF0YXI8L2gzPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgcC00IGJnLWdyYXktNTAgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgIEBmb3IgKHVzZXIgb2YgdXNlcnM7IHRyYWNrIHVzZXIpIHtcbiAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyIFtsaW5rQXZhdGFyXT1cInVzZXJbJ2F2YXRhciddXCJcbiAgICAgICAgICAgICAgW3RleHRBdmF0YXJdPVwidXNlclsnbmFtZSddXCJcbiAgICAgICAgICAgICAgW2lkR2VuQ29sb3JdPVwidXNlclsnaWQnXVwiXG4gICAgICAgICAgICAgIFtzaXplXT1cInVzZXJbJ3NpemUnXVwiXG4gICAgICAgICAgICAgIFt0eXBlU2hhcGVdPVwidXNlclsnaWQnXSA9PT0gJ3VzZXItNCcgPyAncmVjdGFuZ2xlJyA6ICdjaXJjbGUnXCJcbiAgICAgICAgICAgICAgW2NsYXNzSW5jbHVkZV09XCInbXItMidcIj5cbiAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWF2YXRhcj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8cCBjbGFzcz1cIm10LTIgdGV4dC1zbSB0ZXh0LWdyYXktNTAwXCI+TmjDs20gYXZhdGFycyB24bubaSBrw61jaCB0aMaw4bubYyBraMOhYyBuaGF1IHbDoCBoaeG7g24gdGjhu4sgZmFsbGJhY2sga2hpIGtow7RuZyBjw7NcbiAgICAgICAgICBow6xuaCDhuqNuaC48L3A+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBFcnJvciBIYW5kbGluZyBEZW1vIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPljhu60gbMO9IGzhu5dpPC9oMz5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIHAtNCBiZy1ncmF5LTUwIHJvdW5kZWQtbGdcIj5cbiAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWF2YXRhciBbbGlua0F2YXRhcl09XCJpbnZhbGlkSW1hZ2VVcmxcIlxuICAgICAgICAgICAgW2xpbmtBdmF0YXJFcnJvcl09XCJmYWxsYmFja0F2YXRhclwiXG4gICAgICAgICAgICBbdGV4dEF2YXRhcl09XCInRXJyb3IgRmFsbGJhY2snXCJcbiAgICAgICAgICAgIFtpZEdlbkNvbG9yXT1cIidlcnJvci1kZW1vJ1wiXG4gICAgICAgICAgICBbc2l6ZV09XCI0OFwiPlxuICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWF2YXRhcj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LWdyYXktNzAwXCI+QXZhdGFyIHbhu5tpIHjhu60gbMO9IGzhu5dpIGjDrG5oIOG6o25oPC9wPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5LaGkgaMOsbmgg4bqjbmggY2jDrW5oIGLhu4sgbOG7l2ksIHPhur0gaGnhu4NuIHRo4buLIGjDrG5oIOG6o25oIHRoYXkgdGjhur8uPC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8IS0tIEZhbGxiYWNrIHRvIFRleHQgRGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5GYWxsYmFjayB24buBIHbEg24gYuG6o248L2gzPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgcC00IGJnLWdyYXktNTAgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyIFtsaW5rQXZhdGFyXT1cImludmFsaWRJbWFnZVVybFwiXG4gICAgICAgICAgICBbdGV4dEF2YXRhcl09XCInVGV4dCBGYWxsYmFjaydcIlxuICAgICAgICAgICAgW2lkR2VuQ29sb3JdPVwiJ3RleHQtZmFsbGJhY2snXCJcbiAgICAgICAgICAgIFtzaXplXT1cIjQ4XCJcbiAgICAgICAgICAgIChvdXRBdmF0YXJFcnJvcik9XCJoYW5kbGVBdmF0YXJFcnJvcigpXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS03MDBcIj5BdmF0YXIgduG7m2kgZmFsbGJhY2sgduG7gSB2xINuIGLhuqNuPC9wPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtZ3JheS01MDBcIj5LaGkga2jDtG5nIGPDsyBow6xuaCDhuqNuaCwgc+G6vSBoaeG7g24gdGjhu4sgY2jhu68gY8OhaSDEkeG6p3UgY+G7p2EgdsSDbiBi4bqjbiB24bubaSBtw6B1IG7hu4FuIHThu7FcbiAgICAgICAgICAgICAgxJHhu5luZy48L3A+XG4gICAgICAgICAgICBAaWYgKHNob3dFcnJvck1lc3NhZ2UpIHtcbiAgICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LXNtIHRleHQtcmVkLTUwMCBtdC0yXCI+S2jDtG5nIHRo4buDIHThuqNpIGjDrG5oIOG6o25oLiDEkMOjIGhp4buDbiB0aOG7iyB2xINuIGLhuqNuIHRoYXkgdGjhur8uPC9wPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6FjaCBz4butIGThu6VuZzwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5Dw6FjaCAxOiBT4butIGThu6VuZyBmaWxlIEhUTUwgcmnDqm5nIGJp4buHdDwvaDM+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTEgbWQ6Z3JpZC1jb2xzLTIgZ2FwLTYgbWItNFwiPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPkhUTUwgKGV4YW1wbGUuY29tcG9uZW50Lmh0bWwpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPiZsdDtsaWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyXG4gIFtsaW5rQXZhdGFyXT1cIidodHRwczovL2V4YW1wbGUuY29tL2F2YXRhci5qcGcnXCJcbiAgW3RleHRBdmF0YXJdPVwiJ05ndXnhu4VuIFbEg24gQSdcIlxuICBbaWRHZW5Db2xvcl09XCIndXNlci0xMjMnXCJcbiAgW3NpemVdPVwiNDBcIlxuICBbdHlwZVNoYXBlXT1cIidjaXJjbGUnXCImZ3Q7XG4mbHQ7L2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXImZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAoZXhhbXBsZS5jb21wb25lbnQudHMpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPmltcG9ydCAmIzEyMzsgQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2FuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJiMxMjM7IExpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnQgJiMxMjU7IGZyb20gJyYjNjQ7bGlicy11aS9jb21wb25lbnRzLWF2YXRhcic7XG5cbiYjNjQ7Q29tcG9uZW50KCYjMTIzO1xuICBzZWxlY3RvcjogJ2FwcC1leGFtcGxlJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0xpYnNVaUNvbXBvbmVudHNBdmF0YXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBFeGFtcGxlQ29tcG9uZW50ICYjMTIzO1xuICAvLyBDb21wb25lbnQgbG9naWNcbiYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkPDoWNoIDI6IFjhu60gbMO9IHPhu7Ega2nhu4duIGzhu5dpPC9oMz5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMSBtZDpncmlkLWNvbHMtMiBnYXAtNiBtYi00XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+SFRNTCAoZXJyb3ItaGFuZGxlci5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1hdmF0YXJcbiAgW2xpbmtBdmF0YXJdPVwidXNlci5hdmF0YXJcIlxuICBbbGlua0F2YXRhckVycm9yXT1cImRlZmF1bHRBdmF0YXJcIlxuICBbdGV4dEF2YXRhcl09XCJ1c2VyLm5hbWVcIlxuICBbaWRHZW5Db2xvcl09XCJ1c2VyLmlkXCJcbiAgW3NpemVdPVwiNDBcIlxuICAob3V0QXZhdGFyRXJyb3IpPVwiaGFuZGxlQXZhdGFyRXJyb3IoKVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYXZhdGFyJmd0OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPlR5cGVTY3JpcHQgKGVycm9yLWhhbmRsZXIuY29tcG9uZW50LnRzKTwvaDQ+XG4gICAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT5pbXBvcnQgJiMxMjM7IENvbXBvbmVudCAmIzEyNTsgZnJvbSAnJiM2NDthbmd1bGFyL2NvcmUnO1xuaW1wb3J0ICYjMTIzOyBMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1hdmF0YXInO1xuXG4mIzY0O0NvbXBvbmVudCgmIzEyMztcbiAgc2VsZWN0b3I6ICdhcHAtZXJyb3ItaGFuZGxlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtMaWJzVWlDb21wb25lbnRzQXZhdGFyQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Vycm9yLWhhbmRsZXIuY29tcG9uZW50Lmh0bWwnXG4mIzEyNTspXG5leHBvcnQgY2xhc3MgRXJyb3JIYW5kbGVyQ29tcG9uZW50ICYjMTIzO1xuICB1c2VyID0gJiMxMjM7XG4gICAgaWQ6ICd1c2VyLTEyMycsXG4gICAgbmFtZTogJ05ndXnhu4VuIFbEg24gQScsXG4gICAgYXZhdGFyOiAnaHR0cHM6Ly9leGFtcGxlLmNvbS9hdmF0YXIuanBnJ1xuICAmIzEyNTs7XG4gIFxuICBkZWZhdWx0QXZhdGFyID0gJ2h0dHBzOi8vZXhhbXBsZS5jb20vZGVmYXVsdC1hdmF0YXIuanBnJztcblxuICBoYW5kbGVBdmF0YXJFcnJvcigpICYjMTIzO1xuICAgIGNvbnNvbGUubG9nKCdLaMO0bmcgdGjhu4MgdOG6o2kgxJHGsOG7o2MgaMOsbmgg4bqjbmggYXZhdGFyJyk7XG4gICAgLy8gVGjhu7FjIGhp4buHbiBjw6FjIHjhu60gbMO9IGtow6FjIGtoaSBjw7MgbOG7l2lcbiAgJiMxMjU7XG4mIzEyNTs8L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPHNlY3Rpb24gY2xhc3M9XCJiZy13aGl0ZSByb3VuZGVkLWxnIHAtOCBtYi04IHNoYWRvdy1zbVwiPlxuICAgICAgPGgyIGNsYXNzPVwidGV4dC0yeGwgZm9udC1ib2xkIHRleHQtZ3JheS04MDAgbWItNSBwYi0zIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPlTDoGkgbGnhu4d1IEFQSTwvaDI+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5JbnB1dHM8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cIm92ZXJmbG93LXgtYXV0byBtYi04XCI+XG4gICAgICAgIDx0YWJsZSBjbGFzcz1cIm1pbi13LWZ1bGwgYmctd2hpdGUgYm9yZGVyIGJvcmRlci1ncmF5LTIwMFwiPlxuICAgICAgICAgIDx0aGVhZD5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRoIGNsYXNzPVwicHktMyBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy1ncmF5LTEwMCB0ZXh0LWxlZnQgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwXCI+VMOqbjwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPktp4buDdSBk4buvXG4gICAgICAgICAgICAgICAgbGnhu4d1PC90aD5cbiAgICAgICAgICAgICAgPHRoIGNsYXNzPVwicHktMyBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy1ncmF5LTEwMCB0ZXh0LWxlZnQgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwXCI+TeG6t2MgxJHhu4tuaFxuICAgICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5Nw7QgdOG6o1xuICAgICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3RoZWFkPlxuICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+bGlua0F2YXRhcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5zdHJpbmc8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPi08L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+xJDGsOG7nW5nIGThuqtuIGPhu6dhIGjDrG5oIOG6o25oIGF2YXRhcjwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5saW5rQXZhdGFyRXJyb3I8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c3RyaW5nPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj4tPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPsSQxrDhu51uZyBk4bqrbiBj4bunYSBow6xuaCDhuqNuaCB0aGF5IHRo4bq/IGtoaSBhdmF0YXIgY2jDrW5oIGLhu4sgbOG7l2lcbiAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnRleHRBdmF0YXI8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c3RyaW5nPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj4tPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPlbEg24gYuG6o24gaGnhu4NuIHRo4buLIGtoaSBraMO0bmcgY8OzIGjDrG5oIOG6o25oICh0aMaw4budbmcgbMOgIGNo4buvIGPDoWlcbiAgICAgICAgICAgICAgICDEkeG6p3UgY+G7p2EgdMOqbik8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+aWRHZW5Db2xvcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5zdHJpbmc8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPi08L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+SUQgZMO5bmcgxJHhu4MgdOG6oW8gbcOgdSBu4buBbiB04buxIMSR4buZbmcga2hpIHPhu60gZOG7pW5nIHbEg24gYuG6o248L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+c2l6ZTwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPjE2XG4gICAgICAgICAgICAgICAgICB8IDI0IHwgMzIgfCA0MCB8IDQ4IHwgNjQ8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjMyPC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPkvDrWNoIHRoxrDhu5tjIGPhu6dhIGF2YXRhciAodMOtbmggYuG6sW5nIHBpeGVsKTwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj50eXBlU2hhcGU8L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+J2NpcmNsZScgfCAncmVjdGFuZ2xlJzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+J2NpcmNsZSc8L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+SMOsbmggZOG6oW5nIGPhu6dhIGF2YXRhciAodHLDsm4gaG/hurdjIHZ1w7RuZyk8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPjxjb2RlXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+Y2xhc3NJbmNsdWRlPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnN0cmluZzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+J21yLVs4cHhdJzwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5DU1MgY2xhc3MgYuG7lSBzdW5nIGNobyBjb250YWluZXIgY2jDrW5oPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPmNsYXNzSW1hZ2VJbmNsdWRlPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnN0cmluZzwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Jyc8L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Q1NTIGNsYXNzIGLhu5Ugc3VuZyBjaG8gdGjhursgaW1nPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZVxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPmdldExhc3RUZXh0QWZ0ZXJTcGFjZTwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5ib29sZWFuPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5mYWxzZTwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5O4bq/dSB0cnVlLCBjaOG7iSBs4bqleSBjaOG7ryBjw6FpIMSR4bqndSB0acOqbiBj4bunYSB04burIGN14buRaSBjw7luZyB0cm9uZ1xuICAgICAgICAgICAgICAgIHRleHRBdmF0YXI8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5PdXRwdXRzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItOFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3UgZOG7r1xuICAgICAgICAgICAgICAgIGxp4buHdTwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPk3DtCB04bqjXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj5vdXRBdmF0YXJFcnJvcjwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGV4dC1zbSBiZy1ncmF5LTEwMCBweC0xLjUgcHktMC41IHJvdW5kZWRcIj52b2lkPC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5T4buxIGtp4buHbiDEkcaw4bujYyBrw61jaCBob+G6oXQga2hpIGxpbmtBdmF0YXIgYuG7iyBs4buXaSB2w6Aga2jDtG5nIGPDs1xuICAgICAgICAgICAgICAgIGxpbmtBdmF0YXJFcnJvcjwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvdGFibGU+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkludGVyZmFjZXM8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cImJnLWdyYXktNTAgcC02IHJvdW5kZWQtbGdcIj5cbiAgICAgICAgPGg0IGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPklBdmF0YXJDb25maWc8L2g0PlxuICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPmV4cG9ydCBpbnRlcmZhY2UgSUF2YXRhckNvbmZpZyAmIzEyMztcbiAgY2xhc3NJbWFnZUluY2x1ZGU/OiBzdHJpbmc7XG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgc2l6ZT86IFRZUEVfU0laRV9BVkFUQVJfQ09ORklHO1xuICBsaW5rQXZhdGFyPzogc3RyaW5nO1xuICBsaW5rQXZhdGFyRXJyb3I/OiBzdHJpbmc7XG4gIGlkR2VuQ29sb3I/OiBzdHJpbmc7XG4gIHRleHRBdmF0YXI/OiBzdHJpbmc7XG4gIHR5cGVTaGFwZT86IFRZUEVfU0hBUEVfQVZBVEFSO1xuICBnZXRMYXN0VGV4dEFmdGVyU3BhY2U/OiBib29sZWFuO1xuICAmIzEyNTtcblxuZXhwb3J0IHR5cGUgVFlQRV9TSVpFX0FWQVRBUl9DT05GSUcgPSAxNiB8IDI0IHwgMzIgfCA0MCB8IDQ4IHwgNjQ7XG5leHBvcnQgdHlwZSBUWVBFX1NIQVBFX0FWQVRBUiA9ICdjaXJjbGUnIHwgJ3JlY3RhbmdsZSc7PC9jb2RlPjwvcHJlPlxuICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS02MDBcIj5JbnRlcmZhY2UgxJHhu4tuaCBuZ2jEqWEgY+G6pXUgaMOsbmggY+G7p2EgYXZhdGFyIGNvbXBvbmVudC48L3A+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG4gIDwvbWFpbj5cbjwvZGl2PlxuIl19

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

@@ -1,8 +1,9 @@
 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 { getColorById, deleteUnicode } from '@libs-ui/utils';
-import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { NgTemplateOutlet, NgFor } from '@angular/common';
+import { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 class LibsUiComponentsAvatarComponent {
     // #region PROPERTY
@@ -11,6 +12,7 @@ class LibsUiComponentsAvatarComponent {
     isShowIcon = signal(false);
     color = computed(() => getColorById(this.idGenColor() || ''));
     fontSize = computed(this.fontSizeComputed.bind(this));
+    galleryViewerComponent;
     // #region INPUT
     getLastTextAfterSpace = input();
     typeShape = input('circle', { transform: value => value ?? 'circle' });
@@ -18,6 +20,8 @@ class LibsUiComponentsAvatarComponent {
     size = input(32, { transform: value => value ?? 32 });
     linkAvatar = input();
     linkAvatarError = input();
+    classImageInclude = input('', { transform: (value) => value ?? '' });
+    zIndexPreviewImage = input();
     idGenColor = input();
     textAvatar = input('', {
         transform: (value) => {
@@ -28,9 +32,13 @@ class LibsUiComponentsAvatarComponent {
             return value[0] || '&mdash;';
         }
     });
-    classImageInclude = input('', { transform: (value) => value ?? '' });
+    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();
@@ -64,6 +72,23 @@ class LibsUiComponentsAvatarComponent {
         }
         e.target.src = this.linkAvatarError();
     }
+    handlerClickImage() {
+        if (this.galleryViewerComponent) {
+            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) {
@@ -80,12 +105,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: { getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, 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: "<libs_ui-components-popover [config]=\"{\n  whiteTheme:true,\n  width:250,\n  maxHeight:1000,\n  template:templateRef\n}\"\n[ignoreShowPopover]=\"true\">\n  <ng-container *ngTemplateOutlet=\"templateRef; context: {sizeImage: size(),isContainerView:true}\"/>\n</libs_ui-components-popover>\n\n<ng-template #templateRef let-sizeImage=\"sizeImage\" let-isContainerView=\"isContainerView\">\n  <div class=\"libs_ui-component-avatar {{ classInclude() }} {{isContainerView ? '':'!mr-0'}}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle' || !isContainerView\"\n    [style.width.px]='sizeImage || 250'\n    [style.height.px]='sizeImage'>\n    @if (!isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @else () {\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</ng-template>\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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarComponent, isStandalone: true, selector: "libs_ui-components-avatar", inputs: { getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, 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 }, idGenColor: { classPropertyName: "idGenColor", publicName: "idGenColor", 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'\" [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (!isShowIcon()) {\n        <img [class]=\"classImageInclude()+ ' cursor-pointer'\" [src]='linkAvatar()' (error)=\"handlerImageError($event)\" (click)=\"handlerClickImage()\"/>\n    }\n    @else () {\n        <div class='libs_ui-component-avatar-icon {{containertextAvatarClassInclude()}}' [style.background]='color()'>\n            <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{textAvatarClassInclude()}}\" [innerHTML]=\"textAvatar()\">\n            </div>\n        </div>\n    }\n</div>", 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, imports: [NgTemplateOutlet, LibsUiComponentsPopoverComponent], template: "<libs_ui-components-popover [config]=\"{\n  whiteTheme:true,\n  width:250,\n  maxHeight:1000,\n  template:templateRef\n}\"\n[ignoreShowPopover]=\"true\">\n  <ng-container *ngTemplateOutlet=\"templateRef; context: {sizeImage: size(),isContainerView:true}\"/>\n</libs_ui-components-popover>\n\n<ng-template #templateRef let-sizeImage=\"sizeImage\" let-isContainerView=\"isContainerView\">\n  <div class=\"libs_ui-component-avatar {{ classInclude() }} {{isContainerView ? '':'!mr-0'}}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle' || !isContainerView\"\n    [style.width.px]='sizeImage || 250'\n    [style.height.px]='sizeImage'>\n    @if (!isShowIcon()) {\n      <img [class]=\"classImageInclude()\"\n        [src]='linkAvatar()'\n        (error)=\"handlerImageError($event)\" />\n    }\n    @else () {\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</ng-template>\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, imports: [NgTemplateOutlet], template: "<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n    [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\" [style.width.px]='size()'\n    [style.height.px]='size()'>\n    @if (!isShowIcon()) {\n        <img [class]=\"classImageInclude()+ ' cursor-pointer'\" [src]='linkAvatar()' (error)=\"handlerImageError($event)\" (click)=\"handlerClickImage()\"/>\n    }\n    @else () {\n        <div class='libs_ui-component-avatar-icon {{containertextAvatarClassInclude()}}' [style.background]='color()'>\n            <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{textAvatarClassInclude()}}\" [innerHTML]=\"textAvatar()\">\n            </div>\n        </div>\n    }\n</div>", 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: () => [] });
 class LibsUiComponentsAvatarDemoComponent {
@@ -158,7 +187,7 @@ class LibsUiComponentsAvatarDemoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarDemoComponent, isStandalone: true, selector: "lib-avatar-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component Avatar cho Angular</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-avatar</code> l\u00E0 m\u1ED9t\n        component Angular \u0111\u1EC3 hi\u1EC3n th\u1ECB avatar ng\u01B0\u1EDDi d\u00F9ng v\u1EDBi nhi\u1EC1u t\u00F9y ch\u1ECDn nh\u01B0 h\u00ECnh \u1EA3nh, ch\u1EEF c\u00E1i \u0111\u1EA7u,\n        m\u00E0u s\u1EAFc t\u1EF1 \u0111\u1ED9ng, v\u00E0 h\u1ED7 tr\u1EE3 fallback khi \u1EA3nh b\u1ECB l\u1ED7i.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar c\u01A1 b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n            [size]=\"selectedSize\"\n            [typeShape]=\"selectedShape\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi h\u00ECnh \u1EA3nh t\u1EEB URL</p>\n            <p class=\"text-sm text-gray-500\">K\u00EDch th\u01B0\u1EDBc: {{ selectedSize }}px, H\u00ECnh d\u1EA1ng: {{ selectedShape }}</p>\n          </div>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button *ngFor=\"let size of sizeOptions\"\n            (click)=\"setSize(size)\"\n            class=\"px-3 py-1 border rounded\"\n            [class.bg-blue-500]=\"selectedSize === size\"\n            [class.text-white]=\"selectedSize === size\">\n            {{ size }}px\n          </button>\n          <button (click)=\"toggleShape()\"\n            class=\"px-3 py-1 border rounded ml-4\">\n            \u0110\u1ED5i h\u00ECnh d\u1EA1ng\n          </button>\n        </div>\n      </div>\n\n      <!-- Text Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar v\u0103n b\u1EA3n</h3>\n        <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n          @for (name of userNames; track name) {\n            <libs_ui-components-avatar [textAvatar]=\"name\"\n              [idGenColor]=\"name\"\n              [size]=\"40\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u00EAn v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng d\u1EF1a tr\u00EAn ID.</p>\n      </div>\n\n      <!-- Avatar Group Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nh\u00F3m Avatar</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          @for (user of users; track user) {\n            <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n              [textAvatar]=\"user['name']\"\n              [idGenColor]=\"user['id']\"\n              [size]=\"user['size']\"\n              [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n              [classInclude]=\"'mr-2'\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Nh\u00F3m avatars v\u1EDBi k\u00EDch th\u01B0\u1EDBc kh\u00E1c nhau v\u00E0 hi\u1EC3n th\u1ECB fallback khi kh\u00F4ng c\u00F3\n          h\u00ECnh \u1EA3nh.</p>\n      </div>\n\n      <!-- Error Handling Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">X\u1EED l\u00FD l\u1ED7i</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [linkAvatarError]=\"fallbackAvatar\"\n            [textAvatar]=\"'Error Fallback'\"\n            [idGenColor]=\"'error-demo'\"\n            [size]=\"48\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi x\u1EED l\u00FD l\u1ED7i h\u00ECnh \u1EA3nh</p>\n            <p class=\"text-sm text-gray-500\">Khi h\u00ECnh \u1EA3nh ch\u00EDnh b\u1ECB l\u1ED7i, s\u1EBD hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh thay th\u1EBF.</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback to Text Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback v\u1EC1 v\u0103n b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [textAvatar]=\"'Text Fallback'\"\n            [idGenColor]=\"'text-fallback'\"\n            [size]=\"48\"\n            (outAvatarError)=\"handleAvatarError()\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi fallback v\u1EC1 v\u0103n b\u1EA3n</p>\n            <p class=\"text-sm text-gray-500\">Khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh, s\u1EBD hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u c\u1EE7a v\u0103n b\u1EA3n v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1\n              \u0111\u1ED9ng.</p>\n            @if (showErrorMessage) {\n              <p class=\"text-sm text-red-500 mt-2\">Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh. \u0110\u00E3 hi\u1EC3n th\u1ECB v\u0103n b\u1EA3n thay th\u1EBF.</p>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n  [textAvatar]=\"'Nguy\u1EC5n V\u0103n A'\"\n  [idGenColor]=\"'user-123'\"\n  [size]=\"40\"\n  [typeShape]=\"'circle'\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  // Component logic\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: X\u1EED l\u00FD s\u1EF1 ki\u1EC7n l\u1ED7i</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"user.avatar\"\n  [linkAvatarError]=\"defaultAvatar\"\n  [textAvatar]=\"user.name\"\n  [idGenColor]=\"user.id\"\n  [size]=\"40\"\n  (outAvatarError)=\"handleAvatarError()\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-error-handler',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './error-handler.component.html'\n&#125;)\nexport class ErrorHandlerComponent &#123;\n  user = &#123;\n    id: 'user-123',\n    name: 'Nguy\u1EC5n V\u0103n A',\n    avatar: 'https://example.com/avatar.jpg'\n  &#125;;\n  \n  defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n  handleAvatarError() &#123;\n    console.log('Kh\u00F4ng th\u1EC3 t\u1EA3i \u0111\u01B0\u1EE3c h\u00ECnh \u1EA3nh avatar');\n    // Th\u1EF1c hi\u1EC7n c\u00E1c x\u1EED l\u00FD kh\u00E1c khi c\u00F3 l\u1ED7i\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh avatar</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh thay th\u1EBF khi avatar ch\u00EDnh b\u1ECB l\u1ED7i\n              </td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh (th\u01B0\u1EDDng l\u00E0 ch\u1EEF c\u00E1i\n                \u0111\u1EA7u c\u1EE7a t\u00EAn)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">ID d\u00F9ng \u0111\u1EC3 t\u1EA1o m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng khi s\u1EED d\u1EE5ng v\u0103n b\u1EA3n</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n                  | 24 | 32 | 40 | 48 | 64</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">K\u00EDch th\u01B0\u1EDBc c\u1EE7a avatar (t\u00EDnh b\u1EB1ng pixel)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' | 'rectangle'</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">H\u00ECnh d\u1EA1ng c\u1EE7a avatar (tr\u00F2n ho\u1EB7c vu\u00F4ng)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho container ch\u00EDnh</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho th\u1EBB img</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">N\u1EBFu true, ch\u1EC9 l\u1EA5y ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u1EEB cu\u1ED1i c\u00F9ng trong\n                textAvatar</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">S\u1EF1 ki\u1EC7n \u0111\u01B0\u1EE3c k\u00EDch ho\u1EA1t khi linkAvatar b\u1ECB l\u1ED7i v\u00E0 kh\u00F4ng c\u00F3\n                linkAvatarError</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"bg-gray-50 p-6 rounded-lg\">\n        <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig &#123;\n  classImageInclude?: string;\n  classInclude?: string;\n  size?: TYPE_SIZE_AVATAR_CONFIG;\n  linkAvatar?: string;\n  linkAvatarError?: string;\n  idGenColor?: string;\n  textAvatar?: string;\n  typeShape?: TYPE_SHAPE_AVATAR;\n  getLastTextAfterSpace?: boolean;\n  &#125;\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';</code></pre>\n        <p class=\"text-gray-600\">Interface \u0111\u1ECBnh ngh\u0129a c\u1EA5u h\u00ECnh c\u1EE7a avatar component.</p>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: [":host{display:block;width:100%;padding:16px}.demo-wrapper{background-color:#f9fafb;border-radius:8px;padding:16px;margin-bottom:16px}.code-block{font-family:monospace;background-color:#f3f4f6;border-radius:4px;padding:2px 4px;font-size:14px}button{transition:all .2s ease}button:hover{opacity:.9}button:active{transform:scale(.98)}.size-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px}.size-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.shape-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px;margin-left:8px}.shape-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.error-message{color:#ef4444;margin-top:8px;font-size:14px}.copy-button{background-color:#3b82f6;color:#fff;border-radius:4px;padding:4px 8px;font-size:14px;border:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsAvatarDemoComponent, isStandalone: true, selector: "lib-avatar-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component Avatar cho Angular</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-avatar</code> l\u00E0 m\u1ED9t\n        component Angular \u0111\u1EC3 hi\u1EC3n th\u1ECB avatar ng\u01B0\u1EDDi d\u00F9ng v\u1EDBi nhi\u1EC1u t\u00F9y ch\u1ECDn nh\u01B0 h\u00ECnh \u1EA3nh, ch\u1EEF c\u00E1i \u0111\u1EA7u,\n        m\u00E0u s\u1EAFc t\u1EF1 \u0111\u1ED9ng, v\u00E0 h\u1ED7 tr\u1EE3 fallback khi \u1EA3nh b\u1ECB l\u1ED7i.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-avatar</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar c\u01A1 b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n            [size]=\"selectedSize\"\n            [typeShape]=\"selectedShape\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi h\u00ECnh \u1EA3nh t\u1EEB URL</p>\n            <p class=\"text-sm text-gray-500\">K\u00EDch th\u01B0\u1EDBc: {{ selectedSize }}px, H\u00ECnh d\u1EA1ng: {{ selectedShape }}</p>\n          </div>\n        </div>\n        <div class=\"mt-4 flex flex-wrap gap-3\">\n          <button *ngFor=\"let size of sizeOptions\"\n            (click)=\"setSize(size)\"\n            class=\"px-3 py-1 border rounded\"\n            [class.bg-blue-500]=\"selectedSize === size\"\n            [class.text-white]=\"selectedSize === size\">\n            {{ size }}px\n          </button>\n          <button (click)=\"toggleShape()\"\n            class=\"px-3 py-1 border rounded ml-4\">\n            \u0110\u1ED5i h\u00ECnh d\u1EA1ng\n          </button>\n        </div>\n      </div>\n\n      <!-- Text Avatar Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar v\u0103n b\u1EA3n</h3>\n        <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n          @for (name of userNames; track name) {\n            <libs_ui-components-avatar [textAvatar]=\"name\"\n              [idGenColor]=\"name\"\n              [size]=\"40\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u00EAn v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng d\u1EF1a tr\u00EAn ID.</p>\n      </div>\n\n      <!-- Avatar Group Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nh\u00F3m Avatar</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          @for (user of users; track user) {\n            <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n              [textAvatar]=\"user['name']\"\n              [idGenColor]=\"user['id']\"\n              [size]=\"user['size']\"\n              [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n              [classInclude]=\"'mr-2'\">\n            </libs_ui-components-avatar>\n          }\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Nh\u00F3m avatars v\u1EDBi k\u00EDch th\u01B0\u1EDBc kh\u00E1c nhau v\u00E0 hi\u1EC3n th\u1ECB fallback khi kh\u00F4ng c\u00F3\n          h\u00ECnh \u1EA3nh.</p>\n      </div>\n\n      <!-- Error Handling Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">X\u1EED l\u00FD l\u1ED7i</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [linkAvatarError]=\"fallbackAvatar\"\n            [textAvatar]=\"'Error Fallback'\"\n            [idGenColor]=\"'error-demo'\"\n            [size]=\"48\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi x\u1EED l\u00FD l\u1ED7i h\u00ECnh \u1EA3nh</p>\n            <p class=\"text-sm text-gray-500\">Khi h\u00ECnh \u1EA3nh ch\u00EDnh b\u1ECB l\u1ED7i, s\u1EBD hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh thay th\u1EBF.</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback to Text Demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback v\u1EC1 v\u0103n b\u1EA3n</h3>\n        <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n            [textAvatar]=\"'Text Fallback'\"\n            [idGenColor]=\"'text-fallback'\"\n            [size]=\"48\"\n            (outAvatarError)=\"handleAvatarError()\">\n          </libs_ui-components-avatar>\n          <div>\n            <p class=\"text-gray-700\">Avatar v\u1EDBi fallback v\u1EC1 v\u0103n b\u1EA3n</p>\n            <p class=\"text-sm text-gray-500\">Khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh, s\u1EBD hi\u1EC3n th\u1ECB ch\u1EEF c\u00E1i \u0111\u1EA7u c\u1EE7a v\u0103n b\u1EA3n v\u1EDBi m\u00E0u n\u1EC1n t\u1EF1\n              \u0111\u1ED9ng.</p>\n            @if (showErrorMessage) {\n              <p class=\"text-sm text-red-500 mt-2\">Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh. \u0110\u00E3 hi\u1EC3n th\u1ECB v\u0103n b\u1EA3n thay th\u1EBF.</p>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n  [textAvatar]=\"'Nguy\u1EC5n V\u0103n A'\"\n  [idGenColor]=\"'user-123'\"\n  [size]=\"40\"\n  [typeShape]=\"'circle'\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  // Component logic\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: X\u1EED l\u00FD s\u1EF1 ki\u1EC7n l\u1ED7i</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-avatar\n  [linkAvatar]=\"user.avatar\"\n  [linkAvatarError]=\"defaultAvatar\"\n  [textAvatar]=\"user.name\"\n  [idGenColor]=\"user.id\"\n  [size]=\"40\"\n  (outAvatarError)=\"handleAvatarError()\"&gt;\n&lt;/libs_ui-components-avatar&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsAvatarComponent &#125; from '&#64;libs-ui/components-avatar';\n\n&#64;Component(&#123;\n  selector: 'app-error-handler',\n  standalone: true,\n  imports: [LibsUiComponentsAvatarComponent],\n  templateUrl: './error-handler.component.html'\n&#125;)\nexport class ErrorHandlerComponent &#123;\n  user = &#123;\n    id: 'user-123',\n    name: 'Nguy\u1EC5n V\u0103n A',\n    avatar: 'https://example.com/avatar.jpg'\n  &#125;;\n  \n  defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n  handleAvatarError() &#123;\n    console.log('Kh\u00F4ng th\u1EC3 t\u1EA3i \u0111\u01B0\u1EE3c h\u00ECnh \u1EA3nh avatar');\n    // Th\u1EF1c hi\u1EC7n c\u00E1c x\u1EED l\u00FD kh\u00E1c khi c\u00F3 l\u1ED7i\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh avatar</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">\u0110\u01B0\u1EDDng d\u1EABn c\u1EE7a h\u00ECnh \u1EA3nh thay th\u1EBF khi avatar ch\u00EDnh b\u1ECB l\u1ED7i\n              </td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB khi kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh (th\u01B0\u1EDDng l\u00E0 ch\u1EEF c\u00E1i\n                \u0111\u1EA7u c\u1EE7a t\u00EAn)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">ID d\u00F9ng \u0111\u1EC3 t\u1EA1o m\u00E0u n\u1EC1n t\u1EF1 \u0111\u1ED9ng khi s\u1EED d\u1EE5ng v\u0103n b\u1EA3n</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n                  | 24 | 32 | 40 | 48 | 64</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">K\u00EDch th\u01B0\u1EDBc c\u1EE7a avatar (t\u00EDnh b\u1EB1ng pixel)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' | 'rectangle'</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">H\u00ECnh d\u1EA1ng c\u1EE7a avatar (tr\u00F2n ho\u1EB7c vu\u00F4ng)</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho container ch\u00EDnh</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">CSS class b\u1ED5 sung cho th\u1EBB img</td>\n            </tr>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">N\u1EBFu true, ch\u1EC9 l\u1EA5y ch\u1EEF c\u00E1i \u0111\u1EA7u ti\u00EAn c\u1EE7a t\u1EEB cu\u1ED1i c\u00F9ng trong\n                textAvatar</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                  class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">S\u1EF1 ki\u1EC7n \u0111\u01B0\u1EE3c k\u00EDch ho\u1EA1t khi linkAvatar b\u1ECB l\u1ED7i v\u00E0 kh\u00F4ng c\u00F3\n                linkAvatarError</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"bg-gray-50 p-6 rounded-lg\">\n        <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig &#123;\n  classImageInclude?: string;\n  classInclude?: string;\n  size?: TYPE_SIZE_AVATAR_CONFIG;\n  linkAvatar?: string;\n  linkAvatarError?: string;\n  idGenColor?: string;\n  textAvatar?: string;\n  typeShape?: TYPE_SHAPE_AVATAR;\n  getLastTextAfterSpace?: boolean;\n  &#125;\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';</code></pre>\n        <p class=\"text-gray-600\">Interface \u0111\u1ECBnh ngh\u0129a c\u1EA5u h\u00ECnh c\u1EE7a avatar component.</p>\n      </div>\n    </section>\n  </main>\n</div>\n", styles: [":host{display:block;width:100%;padding:16px}.demo-wrapper{background-color:#f9fafb;border-radius:8px;padding:16px;margin-bottom:16px}.code-block{font-family:monospace;background-color:#f3f4f6;border-radius:4px;padding:2px 4px;font-size:14px}button{transition:all .2s ease}button:hover{opacity:.9}button:active{transform:scale(.98)}.size-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px}.size-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.shape-option{cursor:pointer;border:1px solid #e5e7eb;padding:4px 8px;border-radius:4px;margin-left:8px}.shape-option.selected{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.error-message{color:#ef4444;margin-top:8px;font-size:14px}.copy-button{background-color:#3b82f6;color:#fff;border-radius:4px;padding:4px 8px;font-size:14px;border:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "idGenColor", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsAvatarDemoComponent, decorators: [{
             type: Component,

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

	@@ -1 +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/demo/demo.component.ts","../../../../../libs-ui/components/avatar/src/demo/demo.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';\nimport {LibsUiComponentsPopoverComponent} from '@libs-ui/components-popover'\nimport { NgTemplateOutlet } from '@angular/common';\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 imports:[NgTemplateOutlet,LibsUiComponentsPopoverComponent]\n})\nexport class LibsUiComponentsAvatarComponent {\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 // #region INPUT\n readonly getLastTextAfterSpace = input<boolean>();\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] \|\| '—';\n }\n });\n readonly classImageInclude = input<string \| undefined, string \| undefined>('', { transform: (value) => value ?? '' });\n\n // #region 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.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\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}","<libs_ui-components-popover [config]=\"{\n whiteTheme:true,\n width:250,\n maxHeight:1000,\n template:templateRef\n}\"\n[ignoreShowPopover]=\"true\">\n <ng-container ngTemplateOutlet=\"templateRef; context: {sizeImage: size(),isContainerView:true}\"/>\n</libs_ui-components-popover>\n\n<ng-template #templateRef let-sizeImage=\"sizeImage\" let-isContainerView=\"isContainerView\">\n <div class=\"libs_ui-component-avatar {{ classInclude() }} {{isContainerView ? '':'!mr-0'}}\"\n [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle' \|\| !isContainerView\"\n [style.width.px]='sizeImage \|\| 250'\n [style.height.px]='sizeImage'>\n @if (!isShowIcon()) {\n <img [class]=\"classImageInclude()\"\n [src]='linkAvatar()'\n (error)=\"handlerImageError($event)\" />\n }\n @else () {\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</ng-template>\n","import { NgFor } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '../avatar.component';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from '../interfaces/avatar.interface';\n\n@Component({\n selector: 'lib-avatar-demo',\n standalone: true,\n imports: [\n LibsUiComponentsAvatarComponent,\n NgFor\n ],\n templateUrl: './demo.component.html',\n styleUrl: './demo.component.scss'\n})\nexport class LibsUiComponentsAvatarDemoComponent {\n // Basic demo data\n exampleAvatar = 'https://randomuser.me/api/portraits/men/33.jpg';\n fallbackAvatar = 'https://randomuser.me/api/portraits/lego/6.jpg';\n\n // Size variants\n sizeOptions: TYPE_SIZE_AVATAR_CONFIG[] = [16, 24, 32, 40, 48, 64];\n selectedSize: TYPE_SIZE_AVATAR_CONFIG = 40;\n\n // Shape variants\n shapeOptions: TYPE_SHAPE_AVATAR[] = ['circle', 'rectangle'];\n selectedShape: TYPE_SHAPE_AVATAR = 'circle';\n\n // Text avatar demo\n userNames = [\n 'Nguyễn Văn A',\n 'Trần Thị B',\n 'Lê Văn C',\n 'Phạm Thị D',\n 'Vũ Hoàng E',\n 'Đặng Thị F'\n ];\n\n // Demo for avatar group\n users = [\n {\n id: 'user-1',\n name: 'Nguyễn Văn A',\n avatar: 'https://randomuser.me/api/portraits/men/32.jpg',\n size: 64\n },\n {\n id: 'user-2',\n name: 'Trần Thị B',\n avatar: 'https://randomuser.me/api/portraits/women/32.jpg',\n size: 48\n },\n {\n id: 'user-3',\n name: 'Lê Văn C',\n avatar: 'https://randomuser.me/api/portraits/men/33.jpg',\n size: 32\n },\n {\n id: 'user-4',\n name: 'Phạm Thị D',\n avatar: undefined,\n size: 24\n }\n ] as Array<Record<string, any>>;\n\n // Demo for error handling\n invalidImageUrl = 'https://example.com/invalid-image.jpg';\n showErrorMessage = false;\n\n // Methods\n toggleShape() {\n this.selectedShape = this.selectedShape === 'circle' ? 'rectangle' : 'circle';\n }\n\n setSize(size: TYPE_SIZE_AVATAR_CONFIG) {\n this.selectedSize = size;\n }\n\n handleAvatarError() {\n this.showErrorMessage = true;\n setTimeout(() => {\n this.showErrorMessage = false;\n }, 3000);\n }\n\n copyToClipboard(text: string) {\n navigator.clipboard.writeText(text).then(() => {\n alert('Đã sao chép vào clipboard');\n }).catch(err => {\n console.error('Không thể sao chép: ', err);\n });\n }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n <p class=\"text-xl text-gray-500\">Thư viện component Avatar cho Angular</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">@libs-ui/components-avatar</code> là một\n component Angular để hiển thị avatar người dùng với nhiều tùy chọn như hình ảnh, chữ cái đầu,\n màu sắc tự động, và hỗ trợ fallback khi ảnh bị lỗi.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 trở lên</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">Để cài đặt thư viện, sử dụng npm hoặc yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install @libs-ui/components-avatar</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n Sao chép\n </button>\n </div>\n\n <p class=\"mb-4\">Hoặc với yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add @libs-ui/components-avatar</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n Sao chép\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo trực tiếp</h2>\n\n <!-- Basic Avatar Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar cơ bản</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n [size]=\"selectedSize\"\n [typeShape]=\"selectedShape\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với hình ảnh từ URL</p>\n <p class=\"text-sm text-gray-500\">Kích thước: {{ selectedSize }}px, Hình dạng: {{ selectedShape }}</p>\n </div>\n </div>\n <div class=\"mt-4 flex flex-wrap gap-3\">\n <button ngFor=\"let size of sizeOptions\"\n (click)=\"setSize(size)\"\n class=\"px-3 py-1 border rounded\"\n [class.bg-blue-500]=\"selectedSize === size\"\n [class.text-white]=\"selectedSize === size\">\n {{ size }}px\n </button>\n <button (click)=\"toggleShape()\"\n class=\"px-3 py-1 border rounded ml-4\">\n Đổi hình dạng\n </button>\n </div>\n </div>\n\n <!-- Text Avatar Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar văn bản</h3>\n <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n @for (name of userNames; track name) {\n <libs_ui-components-avatar [textAvatar]=\"name\"\n [idGenColor]=\"name\"\n [size]=\"40\">\n </libs_ui-components-avatar>\n }\n </div>\n <p class=\"mt-2 text-sm text-gray-500\">Hiển thị chữ cái đầu tiên của tên với màu nền tự động dựa trên ID.</p>\n </div>\n\n <!-- Avatar Group Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nhóm Avatar</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n @for (user of users; track user) {\n <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n [textAvatar]=\"user['name']\"\n [idGenColor]=\"user['id']\"\n [size]=\"user['size']\"\n [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n [classInclude]=\"'mr-2'\">\n </libs_ui-components-avatar>\n }\n </div>\n <p class=\"mt-2 text-sm text-gray-500\">Nhóm avatars với kích thước khác nhau và hiển thị fallback khi không có\n hình ảnh.</p>\n </div>\n\n <!-- Error Handling Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Xử lý lỗi</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n [linkAvatarError]=\"fallbackAvatar\"\n [textAvatar]=\"'Error Fallback'\"\n [idGenColor]=\"'error-demo'\"\n [size]=\"48\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với xử lý lỗi hình ảnh</p>\n <p class=\"text-sm text-gray-500\">Khi hình ảnh chính bị lỗi, sẽ hiển thị hình ảnh thay thế.</p>\n </div>\n </div>\n </div>\n\n <!-- Fallback to Text Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback về văn bản</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n [textAvatar]=\"'Text Fallback'\"\n [idGenColor]=\"'text-fallback'\"\n [size]=\"48\"\n (outAvatarError)=\"handleAvatarError()\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với fallback về văn bản</p>\n <p class=\"text-sm text-gray-500\">Khi không có hình ảnh, sẽ hiển thị chữ cái đầu của văn bản với màu nền tự\n động.</p>\n @if (showErrorMessage) {\n <p class=\"text-sm text-red-500 mt-2\">Không thể tải hình ảnh. Đã hiển thị văn bản thay thế.</p>\n }\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Cách 1: Sử dụng file HTML riêng biệt</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code><libs_ui-components-avatar\n [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n [textAvatar]=\"'Nguyễn Văn A'\"\n [idGenColor]=\"'user-123'\"\n [size]=\"40\"\n [typeShape]=\"'circle'\">\n</libs_ui-components-avatar></code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\n\n@Component({\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsAvatarComponent],\n templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n // Component logic\n}</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Cách 2: Xử lý sự kiện lỗi</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code><libs_ui-components-avatar\n [linkAvatar]=\"user.avatar\"\n [linkAvatarError]=\"defaultAvatar\"\n [textAvatar]=\"user.name\"\n [idGenColor]=\"user.id\"\n [size]=\"40\"\n (outAvatarError)=\"handleAvatarError()\">\n</libs_ui-components-avatar></code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\n\n@Component({\n selector: 'app-error-handler',\n standalone: true,\n imports: [LibsUiComponentsAvatarComponent],\n templateUrl: './error-handler.component.html'\n})\nexport class ErrorHandlerComponent {\n user = {\n id: 'user-123',\n name: 'Nguyễn Văn A',\n avatar: 'https://example.com/avatar.jpg'\n };\n \n defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n handleAvatarError() {\n console.log('Không thể tải được hình ảnh avatar');\n // Thực hiện các xử lý khác khi có lỗi\n }\n}</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu dữ\n liệu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Đường dẫn của hình ảnh avatar</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Đường dẫn của hình ảnh thay thế khi avatar chính bị lỗi\n </td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Văn bản hiển thị khi không có hình ảnh (thường là chữ cái\n đầu của tên)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">ID dùng để tạo màu nền tự động khi sử dụng văn bản</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n \| 24 \| 32 \| 40 \| 48 \| 64</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Kích thước của avatar (tính bằng pixel)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' \| 'rectangle'</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Hình dạng của avatar (tròn hoặc vuông)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">CSS class bổ sung cho container chính</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">CSS class bổ sung cho thẻ img</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Nếu true, chỉ lấy chữ cái đầu tiên của từ cuối cùng trong\n textAvatar</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu dữ\n liệu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Sự kiện được kích hoạt khi linkAvatar bị lỗi và không có\n linkAvatarError</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig {\n classImageInclude?: string;\n classInclude?: string;\n size?: TYPE_SIZE_AVATAR_CONFIG;\n linkAvatar?: string;\n linkAvatarError?: string;\n idGenColor?: string;\n textAvatar?: string;\n typeShape?: TYPE_SHAPE_AVATAR;\n getLastTextAfterSpace?: boolean;\n }\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 \| 24 \| 32 \| 40 \| 48 \| 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' \| 'rectangle';</code></pre>\n <p class=\"text-gray-600\">Interface định nghĩa cấu hình của avatar component.</p>\n </div>\n </section>\n </main>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
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/demo/demo.component.ts","../../../../../libs-ui/components/avatar/src/demo/demo.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 { 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';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery'\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\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 imports: [NgTemplateOutlet]\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 getLastTextAfterSpace = input<boolean>();\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 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] \|\| '—';\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\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) {\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}","<div class=\"libs_ui-component-avatar {{ classInclude() }}\"\n [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\" [style.width.px]='size()'\n [style.height.px]='size()'>\n @if (!isShowIcon()) {\n <img [class]=\"classImageInclude()+ ' cursor-pointer'\" [src]='linkAvatar()' (error)=\"handlerImageError($event)\" (click)=\"handlerClickImage()\"/>\n }\n @else () {\n <div class='libs_ui-component-avatar-icon {{containertextAvatarClassInclude()}}' [style.background]='color()'>\n <div class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{textAvatarClassInclude()}}\" [innerHTML]=\"textAvatar()\">\n </div>\n </div>\n }\n</div>","import { NgFor } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '../avatar.component';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from '../interfaces/avatar.interface';\n\n@Component({\n selector: 'lib-avatar-demo',\n standalone: true,\n imports: [\n LibsUiComponentsAvatarComponent,\n NgFor\n ],\n templateUrl: './demo.component.html',\n styleUrl: './demo.component.scss'\n})\nexport class LibsUiComponentsAvatarDemoComponent {\n // Basic demo data\n exampleAvatar = 'https://randomuser.me/api/portraits/men/33.jpg';\n fallbackAvatar = 'https://randomuser.me/api/portraits/lego/6.jpg';\n\n // Size variants\n sizeOptions: TYPE_SIZE_AVATAR_CONFIG[] = [16, 24, 32, 40, 48, 64];\n selectedSize: TYPE_SIZE_AVATAR_CONFIG = 40;\n\n // Shape variants\n shapeOptions: TYPE_SHAPE_AVATAR[] = ['circle', 'rectangle'];\n selectedShape: TYPE_SHAPE_AVATAR = 'circle';\n\n // Text avatar demo\n userNames = [\n 'Nguyễn Văn A',\n 'Trần Thị B',\n 'Lê Văn C',\n 'Phạm Thị D',\n 'Vũ Hoàng E',\n 'Đặng Thị F'\n ];\n\n // Demo for avatar group\n users = [\n {\n id: 'user-1',\n name: 'Nguyễn Văn A',\n avatar: 'https://randomuser.me/api/portraits/men/32.jpg',\n size: 64\n },\n {\n id: 'user-2',\n name: 'Trần Thị B',\n avatar: 'https://randomuser.me/api/portraits/women/32.jpg',\n size: 48\n },\n {\n id: 'user-3',\n name: 'Lê Văn C',\n avatar: 'https://randomuser.me/api/portraits/men/33.jpg',\n size: 32\n },\n {\n id: 'user-4',\n name: 'Phạm Thị D',\n avatar: undefined,\n size: 24\n }\n ] as Array<Record<string, any>>;\n\n // Demo for error handling\n invalidImageUrl = 'https://example.com/invalid-image.jpg';\n showErrorMessage = false;\n\n // Methods\n toggleShape() {\n this.selectedShape = this.selectedShape === 'circle' ? 'rectangle' : 'circle';\n }\n\n setSize(size: TYPE_SIZE_AVATAR_CONFIG) {\n this.selectedSize = size;\n }\n\n handleAvatarError() {\n this.showErrorMessage = true;\n setTimeout(() => {\n this.showErrorMessage = false;\n }, 3000);\n }\n\n copyToClipboard(text: string) {\n navigator.clipboard.writeText(text).then(() => {\n alert('Đã sao chép vào clipboard');\n }).catch(err => {\n console.error('Không thể sao chép: ', err);\n });\n }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Avatar Component</h1>\n <p class=\"text-xl text-gray-500\">Thư viện component Avatar cho Angular</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">@libs-ui/components-avatar</code> là một\n component Angular để hiển thị avatar người dùng với nhiều tùy chọn như hình ảnh, chữ cái đầu,\n màu sắc tự động, và hỗ trợ fallback khi ảnh bị lỗi.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 trở lên</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">Để cài đặt thư viện, sử dụng npm hoặc yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install @libs-ui/components-avatar</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-avatar')\">\n Sao chép\n </button>\n </div>\n\n <p class=\"mb-4\">Hoặc với yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add @libs-ui/components-avatar</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-avatar')\">\n Sao chép\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo trực tiếp</h2>\n\n <!-- Basic Avatar Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar cơ bản</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"exampleAvatar\"\n [size]=\"selectedSize\"\n [typeShape]=\"selectedShape\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với hình ảnh từ URL</p>\n <p class=\"text-sm text-gray-500\">Kích thước: {{ selectedSize }}px, Hình dạng: {{ selectedShape }}</p>\n </div>\n </div>\n <div class=\"mt-4 flex flex-wrap gap-3\">\n <button ngFor=\"let size of sizeOptions\"\n (click)=\"setSize(size)\"\n class=\"px-3 py-1 border rounded\"\n [class.bg-blue-500]=\"selectedSize === size\"\n [class.text-white]=\"selectedSize === size\">\n {{ size }}px\n </button>\n <button (click)=\"toggleShape()\"\n class=\"px-3 py-1 border rounded ml-4\">\n Đổi hình dạng\n </button>\n </div>\n </div>\n\n <!-- Text Avatar Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Avatar văn bản</h3>\n <div class=\"flex flex-wrap gap-3 p-4 bg-gray-50 rounded-lg\">\n @for (name of userNames; track name) {\n <libs_ui-components-avatar [textAvatar]=\"name\"\n [idGenColor]=\"name\"\n [size]=\"40\">\n </libs_ui-components-avatar>\n }\n </div>\n <p class=\"mt-2 text-sm text-gray-500\">Hiển thị chữ cái đầu tiên của tên với màu nền tự động dựa trên ID.</p>\n </div>\n\n <!-- Avatar Group Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Nhóm Avatar</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n @for (user of users; track user) {\n <libs_ui-components-avatar [linkAvatar]=\"user['avatar']\"\n [textAvatar]=\"user['name']\"\n [idGenColor]=\"user['id']\"\n [size]=\"user['size']\"\n [typeShape]=\"user['id'] === 'user-4' ? 'rectangle' : 'circle'\"\n [classInclude]=\"'mr-2'\">\n </libs_ui-components-avatar>\n }\n </div>\n <p class=\"mt-2 text-sm text-gray-500\">Nhóm avatars với kích thước khác nhau và hiển thị fallback khi không có\n hình ảnh.</p>\n </div>\n\n <!-- Error Handling Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Xử lý lỗi</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n [linkAvatarError]=\"fallbackAvatar\"\n [textAvatar]=\"'Error Fallback'\"\n [idGenColor]=\"'error-demo'\"\n [size]=\"48\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với xử lý lỗi hình ảnh</p>\n <p class=\"text-sm text-gray-500\">Khi hình ảnh chính bị lỗi, sẽ hiển thị hình ảnh thay thế.</p>\n </div>\n </div>\n </div>\n\n <!-- Fallback to Text Demo -->\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Fallback về văn bản</h3>\n <div class=\"flex items-center p-4 bg-gray-50 rounded-lg\">\n <libs_ui-components-avatar [linkAvatar]=\"invalidImageUrl\"\n [textAvatar]=\"'Text Fallback'\"\n [idGenColor]=\"'text-fallback'\"\n [size]=\"48\"\n (outAvatarError)=\"handleAvatarError()\">\n </libs_ui-components-avatar>\n <div>\n <p class=\"text-gray-700\">Avatar với fallback về văn bản</p>\n <p class=\"text-sm text-gray-500\">Khi không có hình ảnh, sẽ hiển thị chữ cái đầu của văn bản với màu nền tự\n động.</p>\n @if (showErrorMessage) {\n <p class=\"text-sm text-red-500 mt-2\">Không thể tải hình ảnh. Đã hiển thị văn bản thay thế.</p>\n }\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Cách 1: Sử dụng file HTML riêng biệt</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code><libs_ui-components-avatar\n [linkAvatar]=\"'https://example.com/avatar.jpg'\"\n [textAvatar]=\"'Nguyễn Văn A'\"\n [idGenColor]=\"'user-123'\"\n [size]=\"40\"\n [typeShape]=\"'circle'\">\n</libs_ui-components-avatar></code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\n\n@Component({\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsAvatarComponent],\n templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n // Component logic\n}</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Cách 2: Xử lý sự kiện lỗi</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (error-handler.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code><libs_ui-components-avatar\n [linkAvatar]=\"user.avatar\"\n [linkAvatarError]=\"defaultAvatar\"\n [textAvatar]=\"user.name\"\n [idGenColor]=\"user.id\"\n [size]=\"40\"\n (outAvatarError)=\"handleAvatarError()\">\n</libs_ui-components-avatar></code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (error-handler.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import { Component } from '@angular/core';\nimport { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\n\n@Component({\n selector: 'app-error-handler',\n standalone: true,\n imports: [LibsUiComponentsAvatarComponent],\n templateUrl: './error-handler.component.html'\n})\nexport class ErrorHandlerComponent {\n user = {\n id: 'user-123',\n name: 'Nguyễn Văn A',\n avatar: 'https://example.com/avatar.jpg'\n };\n \n defaultAvatar = 'https://example.com/default-avatar.jpg';\n\n handleAvatarError() {\n console.log('Không thể tải được hình ảnh avatar');\n // Thực hiện các xử lý khác khi có lỗi\n }\n}</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu dữ\n liệu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatar</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Đường dẫn của hình ảnh avatar</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">linkAvatarError</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Đường dẫn của hình ảnh thay thế khi avatar chính bị lỗi\n </td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">textAvatar</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Văn bản hiển thị khi không có hình ảnh (thường là chữ cái\n đầu của tên)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">idGenColor</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">-</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">ID dùng để tạo màu nền tự động khi sử dụng văn bản</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">size</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">16\n \| 24 \| 32 \| 40 \| 48 \| 64</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">32</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Kích thước của avatar (tính bằng pixel)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">typeShape</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">'circle' \| 'rectangle'</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">'circle'</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Hình dạng của avatar (tròn hoặc vuông)</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classInclude</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">'mr-[8px]'</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">CSS class bổ sung cho container chính</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">classImageInclude</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">string</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">''</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">CSS class bổ sung cho thẻ img</td>\n </tr>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">getLastTextAfterSpace</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">boolean</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">false</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Nếu true, chỉ lấy chữ cái đầu tiên của từ cuối cùng trong\n textAvatar</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu dữ\n liệu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">outAvatarError</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">void</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">Sự kiện được kích hoạt khi linkAvatar bị lỗi và không có\n linkAvatarError</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">IAvatarConfig</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>export interface IAvatarConfig {\n classImageInclude?: string;\n classInclude?: string;\n size?: TYPE_SIZE_AVATAR_CONFIG;\n linkAvatar?: string;\n linkAvatarError?: string;\n idGenColor?: string;\n textAvatar?: string;\n typeShape?: TYPE_SHAPE_AVATAR;\n getLastTextAfterSpace?: boolean;\n }\n\nexport type TYPE_SIZE_AVATAR_CONFIG = 16 \| 24 \| 32 \| 40 \| 48 \| 64;\nexport type TYPE_SHAPE_AVATAR = 'circle' \| 'rectangle';</code></pre>\n <p class=\"text-gray-600\">Interface định nghĩa cấu hình của avatar component.</p>\n </div>\n </section>\n </main>\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 CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "@libs-ui/components-avatar",
-  "version": "0.2.228",
+  "version": "0.2.230",
   "peerDependencies": {
     "@angular/core": "^18.2.0",
-    "@libs-ui/interfaces-types": "^0.2.228",
-    "@libs-ui/utils": "^0.2.228"
+    "@libs-ui/interfaces-types": "^0.2.230",
+    "@libs-ui/utils": "^0.2.230"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-avatar.mjs",