@leanix/components 0.4.511 → 0.4.512

package/fesm2022/leanix-components.mjs

@@ -2593,6 +2593,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
+class DisplayAvatarsPipe {
+    transform(users, type, size, userGroupWidth, autoScale, maxLength) {
+        if (maxLength) {
+            return users.slice(0, maxLength);
+        }
+        if (autoScale) {
+            if (type === 'group') {
+                const usersToShow = Math.floor((userGroupWidth - 2 * SIZES[size]) / ((SIZES[size] * 2) / 3)) + 1;
+                return users.slice(0, usersToShow);
+            }
+            else {
+                const usersToShow = Math.floor(userGroupWidth / (SIZES[size] + 2)) - 1;
+                return users.slice(0, usersToShow);
+            }
+        }
+        return users;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DisplayAvatarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: DisplayAvatarsPipe, isStandalone: true, name: "displayAvatars" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DisplayAvatarsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'displayAvatars',
+                    standalone: true
+                }]
+        }] });
+const SIZES = {
+    XS: 16,
+    S: 24,
+    M: 32,
+    L: 40,
+    XL: 64
+};
+
+const IMAGE_READER = new InjectionToken('IMAGE_READER');
+const DEFAULT_IMAGE_ID = '00000000-0000-4000-0000-000000000001';
+const REFERENCE_SIZE_MAPPING = {
+    XS: 16,
+    S: 24,
+    M: 32,
+    L: 40,
+    XL: 64
+};
+// We want to use 2x bigger images for avatars to support high resolution displays
+// So we want to draw them in their original size but use 2x the size as reference
+const AVATAR_SIZE_MAPPING = {
+    XS: REFERENCE_SIZE_MAPPING.XS * 2,
+    S: REFERENCE_SIZE_MAPPING.S * 2,
+    M: REFERENCE_SIZE_MAPPING.M * 2,
+    L: REFERENCE_SIZE_MAPPING.L * 2,
+    XL: REFERENCE_SIZE_MAPPING.XL * 2
+};
+const AVATAR_COLORS = [
+    '#00a399',
+    '#0f7eb5',
+    '#18aece',
+    '#2889ff',
+    '#ff914d',
+    '#fad71e',
+    '#fe6690',
+    '#ab657a',
+    '#916b50',
+    '#9755cd',
+    '#fc9785'
+];
+
+class AvatarComponent {
+    constructor(imageReader) {
+        this.imageReader = imageReader;
+        this.size = 'M';
+        this.showMailToLink = true;
+        this.disabled = false;
+        this.NAME = 'AvatarComponent';
+        this.imageURL = this.imageReader.getAvatar(DEFAULT_IMAGE_ID, this.size, this.user?.displayName);
+    }
+    ngOnChanges(changes) {
+        const { user } = changes;
+        if (user && user.currentValue && !user.currentValue.technicalUser) {
+            const { id, displayName } = this.user || {};
+            this.imageURL = this.imageReader.getAvatar(id ?? undefined, this.size, displayName);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AvatarComponent, deps: [{ token: IMAGE_READER }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AvatarComponent, isStandalone: true, selector: "lx-avatar", inputs: { user: "user", size: "size", showMailToLink: "showMailToLink", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"imageURL | async; else loading\">\n  <ng-container *ngIf=\"!user.technicalUser; else technicalUserIcon\">\n    <a\n      *ngIf=\"showMailToLink && user.email; else profilePicture\"\n      class=\"userLink\"\n      href=\"mailto:{{ user.email }}\"\n      lxTooltip=\"{{ user.displayName }}\"\n    >\n      <img\n        [src]=\"imageURL | async\"\n        class=\"avatarImage\"\n        [class]=\"size\"\n        [class.disabled]=\"disabled\"\n        role=\"presentation\"\n        alt=\"{{ user.displayName }}\"\n      />\n    </a>\n    <ng-template #profilePicture>\n      <img\n        [src]=\"imageURL | async\"\n        class=\"avatarImage\"\n        [class]=\"size\"\n        [class.disabled]=\"disabled\"\n        role=\"presentation\"\n        alt=\"{{ user.displayName }}\"\n      />\n    </ng-template>\n  </ng-container>\n  <ng-template #technicalUserIcon>\n    <i class=\"avatarImage fas fa-robot\" lxTooltip=\"{{ user.displayName }}\" [class]=\"size\" [class.disabled]=\"disabled\"></i>\n  </ng-template>\n</ng-container>\n<ng-template #loading>\n  <div class=\"avatarImage userLink loading\" [ngClass]=\"size\"></div>\n</ng-template>\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.fa-robot{background-color:#b2bccc;color:#fff;vertical-align:middle;text-align:center}.fa-robot.XS{line-height:14px;font-size:10px}.fa-robot.S{line-height:22px;font-size:13px}.fa-robot.M{line-height:30px;font-size:18px}.fa-robot.L{line-height:38px;font-size:22px}.fa-robot.XL{line-height:62px;font-size:40px}.XS{width:16px;height:16px}.S{width:24px;height:24px}.M{width:32px;height:32px}.L{width:40px;height:40px}.XL{width:64px;height:64px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-avatar', standalone: true, imports: [NgIf, AsyncPipe, NgClass, TooltipDirective], template: "<ng-container *ngIf=\"imageURL | async; else loading\">\n  <ng-container *ngIf=\"!user.technicalUser; else technicalUserIcon\">\n    <a\n      *ngIf=\"showMailToLink && user.email; else profilePicture\"\n      class=\"userLink\"\n      href=\"mailto:{{ user.email }}\"\n      lxTooltip=\"{{ user.displayName }}\"\n    >\n      <img\n        [src]=\"imageURL | async\"\n        class=\"avatarImage\"\n        [class]=\"size\"\n        [class.disabled]=\"disabled\"\n        role=\"presentation\"\n        alt=\"{{ user.displayName }}\"\n      />\n    </a>\n    <ng-template #profilePicture>\n      <img\n        [src]=\"imageURL | async\"\n        class=\"avatarImage\"\n        [class]=\"size\"\n        [class.disabled]=\"disabled\"\n        role=\"presentation\"\n        alt=\"{{ user.displayName }}\"\n      />\n    </ng-template>\n  </ng-container>\n  <ng-template #technicalUserIcon>\n    <i class=\"avatarImage fas fa-robot\" lxTooltip=\"{{ user.displayName }}\" [class]=\"size\" [class.disabled]=\"disabled\"></i>\n  </ng-template>\n</ng-container>\n<ng-template #loading>\n  <div class=\"avatarImage userLink loading\" [ngClass]=\"size\"></div>\n</ng-template>\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.fa-robot{background-color:#b2bccc;color:#fff;vertical-align:middle;text-align:center}.fa-robot.XS{line-height:14px;font-size:10px}.fa-robot.S{line-height:22px;font-size:13px}.fa-robot.M{line-height:30px;font-size:18px}.fa-robot.L{line-height:38px;font-size:22px}.fa-robot.XL{line-height:62px;font-size:40px}.XS{width:16px;height:16px}.S{width:24px;height:24px}.M{width:32px;height:32px}.L{width:40px;height:40px}.XL{width:64px;height:64px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IMAGE_READER]
+                }] }], propDecorators: { user: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showMailToLink: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class AvatarGroupComponent {
+    get userNames() {
+        return this.users
+            .map(({ displayName }) => displayName)
+            .sort()
+            .join('<br>');
+    }
+    constructor(cdr, zone) {
+        this.cdr = cdr;
+        this.zone = zone;
+        this.NAME = 'AvatarGroupComponent';
+        this.users = [];
+        this.size = 'M';
+        this.type = 'group';
+        this.maxLength = 0;
+        this.autoScale = false;
+        this.disabledUserIds = [];
+        this.overlayVisible = false;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.zone.runOutsideAngular(() => {
+                this.zone.run(() => {
+                    this.cdr.detectChanges();
+                });
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.resizeObserver.observe(this.userGroupElement.nativeElement);
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        this.overlayVisible = true;
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver && this.userGroupElement) {
+            this.resizeObserver.unobserve(this.userGroupElement.nativeElement);
+        }
+    }
+    isUserDisabled(user) {
+        return !!user.id && this.disabledUserIds.includes(user.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AvatarGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AvatarGroupComponent, isStandalone: true, selector: "lx-avatar-group", inputs: { title: "title", users: "users", size: "size", type: "type", maxLength: "maxLength", autoScale: "autoScale", disabledUserIds: "disabledUserIds" }, viewQueries: [{ propertyName: "userGroupElement", first: true, predicate: ["userGroup"], descendants: true }], ngImport: i0, template: "<div\n  #userGroup\n  (click)=\"handleClick($event)\"\n  (keydown.enter)=\"handleClick($event)\"\n  (keydown.space)=\"handleClick($event)\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [lxTooltip]=\"!overlayVisible ? userNames : null\"\n  [lxTooltipIsHtmlContent]=\"true\"\n  tabindex=\"0\"\n  role=\"button\"\n  aria-haspopup=\"dialog\"\n>\n  <div *ngIf=\"users | displayAvatars: type : size : userGroup.offsetWidth : autoScale : maxLength as filteredUsers\" class=\"group-container\">\n    <lx-avatar\n      [user]=\"user\"\n      [size]=\"size\"\n      [showMailToLink]=\"false\"\n      [disabled]=\"isUserDisabled(user)\"\n      [ngClass]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n      *ngFor=\"let user of filteredUsers\"\n    />\n    <div\n      *ngIf=\"filteredUsers.length < users.length\"\n      [ngClass]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n      class=\"more-users-icon\"\n    >\n      +{{ users.length - filteredUsers.length }}\n    </div>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"overlayVisible\"\n  (overlayOutsideClick)=\"overlayVisible = false\"\n>\n  <div class=\"avatars-overlay\">\n    <div *ngIf=\"title\" class=\"avatars-overlay-title\">{{ title }}</div>\n    <div class=\"avatars-list\">\n      <div *ngFor=\"let user of users\" class=\"individual\">\n        <lx-avatar [user]=\"user\" [size]=\"size\" [showMailToLink]=\"true\" [disabled]=\"isUserDisabled(user)\" />\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".group-container{display:flex;align-items:center}.group-container lx-avatar{display:flex;align-items:center}.group-container .more-users-icon{color:#61779d;background-color:#fff;border:1px solid #c2c9d6;border-radius:50%;font-weight:700;-webkit-user-select:none;user-select:none}.individual{margin-right:2px!important}.avatars-overlay{max-width:360px;overflow:auto;margin-top:5px;border-radius:10px;background-color:#fff;border:1px solid #c2c9d6;box-shadow:0 6px 12px #0000002d}.avatars-overlay .avatars-list{display:flex;flex-wrap:wrap;padding:10px}.avatars-overlay .avatars-list lx-avatar{display:block;margin-bottom:5px}.avatars-overlay .avatars-overlay-title{border-bottom:1px solid #c2c9d6;padding:10px;font-weight:700}.XS{width:16px;height:16px;line-height:16px;font-size:8px}.XS.group:not(:first-child){margin-left:-8px}.S{width:24px;height:24px;line-height:24px;font-size:11.25px}.S.group:not(:first-child){margin-left:-12px}.M{width:32px;height:32px;line-height:32px;text-align:center;vertical-align:middle;font-size:15.5px}.M.group:not(:first-child){margin-left:-10px}.L{width:40px;height:40px;line-height:40px;text-align:center;vertical-align:middle;font-size:large}.L.group:not(:first-child){margin-left:-20px}.XL{width:64px;height:64px;line-height:64px;text-align:center;vertical-align:middle;font-size:large}.XL.group:not(:first-child){margin-left:-50px}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "lx-avatar", inputs: ["user", "size", "showMailToLink", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: DisplayAvatarsPipe, name: "displayAvatars" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-avatar-group', standalone: true, imports: [CdkOverlayOrigin, TooltipDirective, NgIf, NgFor, AvatarComponent, NgClass, CdkConnectedOverlay, DisplayAvatarsPipe], template: "<div\n  #userGroup\n  (click)=\"handleClick($event)\"\n  (keydown.enter)=\"handleClick($event)\"\n  (keydown.space)=\"handleClick($event)\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [lxTooltip]=\"!overlayVisible ? userNames : null\"\n  [lxTooltipIsHtmlContent]=\"true\"\n  tabindex=\"0\"\n  role=\"button\"\n  aria-haspopup=\"dialog\"\n>\n  <div *ngIf=\"users | displayAvatars: type : size : userGroup.offsetWidth : autoScale : maxLength as filteredUsers\" class=\"group-container\">\n    <lx-avatar\n      [user]=\"user\"\n      [size]=\"size\"\n      [showMailToLink]=\"false\"\n      [disabled]=\"isUserDisabled(user)\"\n      [ngClass]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n      *ngFor=\"let user of filteredUsers\"\n    />\n    <div\n      *ngIf=\"filteredUsers.length < users.length\"\n      [ngClass]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n      class=\"more-users-icon\"\n    >\n      +{{ users.length - filteredUsers.length }}\n    </div>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"overlayVisible\"\n  (overlayOutsideClick)=\"overlayVisible = false\"\n>\n  <div class=\"avatars-overlay\">\n    <div *ngIf=\"title\" class=\"avatars-overlay-title\">{{ title }}</div>\n    <div class=\"avatars-list\">\n      <div *ngFor=\"let user of users\" class=\"individual\">\n        <lx-avatar [user]=\"user\" [size]=\"size\" [showMailToLink]=\"true\" [disabled]=\"isUserDisabled(user)\" />\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".group-container{display:flex;align-items:center}.group-container lx-avatar{display:flex;align-items:center}.group-container .more-users-icon{color:#61779d;background-color:#fff;border:1px solid #c2c9d6;border-radius:50%;font-weight:700;-webkit-user-select:none;user-select:none}.individual{margin-right:2px!important}.avatars-overlay{max-width:360px;overflow:auto;margin-top:5px;border-radius:10px;background-color:#fff;border:1px solid #c2c9d6;box-shadow:0 6px 12px #0000002d}.avatars-overlay .avatars-list{display:flex;flex-wrap:wrap;padding:10px}.avatars-overlay .avatars-list lx-avatar{display:block;margin-bottom:5px}.avatars-overlay .avatars-overlay-title{border-bottom:1px solid #c2c9d6;padding:10px;font-weight:700}.XS{width:16px;height:16px;line-height:16px;font-size:8px}.XS.group:not(:first-child){margin-left:-8px}.S{width:24px;height:24px;line-height:24px;font-size:11.25px}.S.group:not(:first-child){margin-left:-12px}.M{width:32px;height:32px;line-height:32px;text-align:center;vertical-align:middle;font-size:15.5px}.M.group:not(:first-child){margin-left:-10px}.L{width:40px;height:40px;line-height:40px;text-align:center;vertical-align:middle;font-size:large}.L.group:not(:first-child){margin-left:-20px}.XL{width:64px;height:64px;line-height:64px;text-align:center;vertical-align:middle;font-size:large}.XL.group:not(:first-child){margin-left:-50px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { title: [{
+                type: Input
+            }], users: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], autoScale: [{
+                type: Input
+            }], disabledUserIds: [{
+                type: Input
+            }], userGroupElement: [{
+                type: ViewChild,
+                args: ['userGroup']
+            }] } });
+
 /**
  * Skeleton is a component that can be used to show a loading state of a component.
  *
@@ -2827,6 +2995,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: [SatPopoverComponent]
             }] } });
 
+/**
+ * Generates an SVG for the avatar initials
+ * @param displayName The name of the user
+ * @param size The size of the avatar
+ * @returns A promise with the data URL of the generated SVG
+ */
+function getInitialsUrl(displayName, size) {
+    const twoWordsName = displayName.split(' ').slice(0, 2);
+    const initials = twoWordsName.length === 1 ? `${twoWordsName[0]?.[0]}` : `${twoWordsName[0]?.[0]}${twoWordsName[1]?.[0]}`;
+    const svg = generateInitialsSVG(initials.toUpperCase(), size && AVATAR_SIZE_MAPPING[size]);
+    const blob = new Blob([svg], { type: 'image/svg+xml' });
+    return blobToDataURL(blob);
+}
+function hashString(s) {
+    let hash = 0;
+    let i = 0;
+    const l = s.length;
+    if (l > 0)
+        while (i < l)
+            hash = ((hash << 5) - hash + s.charCodeAt(i++)) | 0;
+    return Math.abs(hash);
+}
+function getAvatarColorHex(initials) {
+    const tagNameHash = hashString(initials.toUpperCase());
+    return AVATAR_COLORS[(tagNameHash % 11) + 1];
+}
+function generateInitialsSVG(initials, size = 24) {
+    const fontSize = (size * 40) / 100;
+    const textY = (size * 63) / 100;
+    const svgTemplate = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" preserveAspectRatio="xMidYMid meet">
+      <circle cx="${size / 2}" cy="${size / 2}" r="${size / 2}" fill="${getAvatarColorHex(initials)}"></circle>
+      <text x="${size / 2}" y="${textY}" font-family="Arial" font-size="${fontSize}" text-anchor="middle" fill="#ffffff" style="user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;">
+        ${initials}
+      </text>
+    </svg>`;
+    return svgTemplate;
+}
+function blobToDataURL(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (_e) => resolve(reader.result);
+        reader.onerror = (_e) => reject(reader.error);
+        reader.onabort = (_e) => reject(new Error('Read aborted'));
+        reader.readAsDataURL(blob);
+    });
+}
+
 const defaultElement = 'span';
 const defaultClassName = 'highlight';
 /**
@@ -10135,5 +10351,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, ICON_MAP, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.mjs.map