@leanix/components 0.4.590 → 0.4.591

package/fesm2022/leanix-components.mjs

@@ -2710,9 +2710,10 @@ class AvatarGroupComponent {
             .sort()
             .join('<br>');
     }
-    constructor(cdr, zone) {
+    constructor(cdr, zone, resizeObserverService) {
         this.cdr = cdr;
         this.zone = zone;
+        this.resizeObserverService = resizeObserverService;
         this.NAME = 'AvatarGroupComponent';
         this.users = [];
         this.size = 'M';
@@ -2721,7 +2722,9 @@ class AvatarGroupComponent {
         this.autoScale = false;
         this.disabledUserIds = [];
         this.overlayVisible = false;
-        this.resizeObserver = new ResizeObserver(() => {
+    }
+    ngAfterViewInit() {
+        this.resizeObserverService.observe(this.userGroupElement.nativeElement, () => {
             this.zone.runOutsideAngular(() => {
                 this.zone.run(() => {
                     this.cdr.detectChanges();
@@ -2729,16 +2732,13 @@ class AvatarGroupComponent {
             });
         });
     }
-    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);
+        if (this.userGroupElement) {
+            this.resizeObserverService.unobserve(this.userGroupElement.nativeElement);
         }
     }
     isUserDisabled(user) {
@@ -2747,13 +2747,13 @@ class AvatarGroupComponent {
     userTrackBy(index, user) {
         return user.id ?? index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AvatarGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AvatarGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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  @let filteredUsers = users | displayAvatars: type : size : userGroup.offsetWidth : autoScale : maxLength;\n  @if (filteredUsers) {\n    <div class=\"group-container\">\n      @for (user of filteredUsers; track userTrackBy($index, user)) {\n        <lx-avatar\n          [user]=\"user\"\n          [size]=\"size\"\n          [showMailToLink]=\"false\"\n          [disabled]=\"isUserDisabled(user)\"\n          [class]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n        />\n      }\n      @if (filteredUsers.length < users.length) {\n        <div [class]=\"[type === 'individual' ? 'individual' : 'group', size]\" class=\"more-users-icon\">\n          +{{ users.length - filteredUsers.length }}\n        </div>\n      }\n    </div>\n  }\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    @if (title) {\n      <div class=\"avatars-overlay-title\">{{ title }}</div>\n    }\n    <div class=\"avatars-list\">\n      @for (user of users; track userTrackBy($index, user)) {\n        <div class=\"individual\">\n          <lx-avatar [user]=\"user\" [size]=\"size\" [showMailToLink]=\"true\" [disabled]=\"isUserDisabled(user)\" />\n        </div>\n      }\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: "component", type: AvatarComponent, selector: "lx-avatar", inputs: ["user", "size", "showMailToLink", "disabled"] }, { 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: "19.2.6", ngImport: i0, type: AvatarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-avatar-group', imports: [CdkOverlayOrigin, TooltipDirective, AvatarComponent, 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  @let filteredUsers = users | displayAvatars: type : size : userGroup.offsetWidth : autoScale : maxLength;\n  @if (filteredUsers) {\n    <div class=\"group-container\">\n      @for (user of filteredUsers; track userTrackBy($index, user)) {\n        <lx-avatar\n          [user]=\"user\"\n          [size]=\"size\"\n          [showMailToLink]=\"false\"\n          [disabled]=\"isUserDisabled(user)\"\n          [class]=\"[type === 'individual' ? 'individual' : 'group', size]\"\n        />\n      }\n      @if (filteredUsers.length < users.length) {\n        <div [class]=\"[type === 'individual' ? 'individual' : 'group', size]\" class=\"more-users-icon\">\n          +{{ users.length - filteredUsers.length }}\n        </div>\n      }\n    </div>\n  }\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    @if (title) {\n      <div class=\"avatars-overlay-title\">{{ title }}</div>\n    }\n    <div class=\"avatars-list\">\n      @for (user of users; track userTrackBy($index, user)) {\n        <div class=\"individual\">\n          <lx-avatar [user]=\"user\" [size]=\"size\" [showMailToLink]=\"true\" [disabled]=\"isUserDisabled(user)\" />\n        </div>\n      }\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: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: ResizeObserverService }], propDecorators: { title: [{
                 type: Input
             }], users: [{
                 type: Input