@leanix/components 0.4.590 → 0.4.592

package/fesm2022/leanix-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, output, ApplicationRef, createComponent } from '@angular/core';
+import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
@@ -1517,6 +1517,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }] } });
 
+/**
+ * @ignore
+ * Displays Font Awesome icons.
+ */
+class IconComponent {
+    constructor() {
+        this.NAME = 'IconComponent';
+        this.color = '#000';
+        this.fontAwsomeStyle = 'regular';
+        this.size = '14px';
+        this.iconStyleMap = {
+            solid: 'fas',
+            regular: 'far',
+            light: 'fal'
+        };
+        this.iconStyle = 'far';
+    }
+    ngOnChanges(changes) {
+        if ('fontAwsomeStyle' in changes) {
+            this.iconStyle = this.iconStyleMap[this.fontAwsomeStyle];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: IconComponent, isStandalone: true, selector: "lx-icon", inputs: { name: "name", color: "color", fontAwsomeStyle: "fontAwsomeStyle", size: "size", title: "title" }, host: { properties: { "style.height": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], fontAwsomeStyle: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.height']
+            }], title: [{
+                type: Input
+            }] } });
+
 /**
  * This pipe transforms...
  * - "raw" http(s) links
@@ -2451,6 +2494,7 @@ const CORE_MODULE_EXPORTS = [
     EllipsisComponent,
     HighlightRangePipe,
     HighlightTermPipe,
+    IconComponent,
     IconScaleComponent,
     LxLinkifyPipe,
     LxUnlinkifyPipe,
@@ -2491,6 +2535,7 @@ class LxCoreUiModule {
             EllipsisComponent,
             HighlightRangePipe,
             HighlightTermPipe,
+            IconComponent,
             IconScaleComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
@@ -2525,6 +2570,7 @@ class LxCoreUiModule {
             EllipsisComponent,
             HighlightRangePipe,
             HighlightTermPipe,
+            IconComponent,
             IconScaleComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
@@ -2575,6 +2621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         EllipsisComponent,
                         HighlightRangePipe,
                         HighlightTermPipe,
+                        IconComponent,
                         IconScaleComponent,
                         LxLinkifyPipe,
                         LxUnlinkifyPipe,
@@ -2710,9 +2757,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 +2769,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 +2779,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 +2794,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
@@ -2772,6 +2819,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['userGroup']
             }] } });
 
+/**
+ * The page header acts as a central navigation tool, guiding users through the application and helping them understand their current location.
+ * It often includes a back arrow for easy navigation in child pages and may feature a toolbar on the right for quick access to actions or tools.
+ * Additionally, it can include a breadcrumb.
+ *
+ * ### Projection slots
+ * - `header-title`: Defines the page title content
+ * - `header-content`: Defines additional content below the page title
+ * - `header-buttons`: Defines the header action buttons
+ */
+class PageHeaderComponent {
+    constructor() {
+        /**
+         * Optional title to display in the header.
+         * If none is passed down, the component assumes
+         * you will pass down a title via the `header-title` projection slot.
+         */
+        this.pageTitle = input();
+        /**
+         * Relative URL to navigate back to
+         */
+        this.backUrl = input([]);
+        /**
+         * Query parameters to append to the `backUrl`
+         */
+        this.queryParams = input({});
+        /**
+         * Accessible name of the back link
+         */
+        this.backUrlLabel = input();
+        /**
+         * Additional navigation state for the back link
+         */
+        this.navigationStateOptions = input({});
+        /**
+         * Whether a divider should be shown below the header.
+         * @default true
+         */
+        this.showDivider = input(true);
+        /**
+         * Event emitted when the back icon is clicked.
+         */
+        this.backIconClick = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PageHeaderComponent, isStandalone: true, selector: "lx-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backUrl: { classPropertyName: "backUrl", publicName: "backUrl", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, backUrlLabel: { classPropertyName: "backUrlLabel", publicName: "backUrlLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationStateOptions: { classPropertyName: "navigationStateOptions", publicName: "navigationStateOptions", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backIconClick: "backIconClick" }, ngImport: i0, template: "<div class=\"tw-mb-l tw-flex tw-min-h-xxl tw-items-start tw-justify-between tw-gap-xl\">\n  <div class=\"tw-flex tw-flex-col tw-items-start\">\n    <div class=\"tw-flex tw-items-center tw-justify-start\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"-tw-mb-s tw-mt-xs tw-flex tw-self-start\">\n      <ng-content select=\"[header-content]\" />\n    </div>\n  </div>\n  <div class=\"tw-flex tw-items-start tw-justify-end tw-gap-xs tw-self-center tw-text-nowrap\">\n    <ng-content select=\"[header-buttons]\" />\n  </div>\n</div>\n\n@if (showDivider()) {\n  <div data-testid=\"header-divider\" class=\"tw-mb-l tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterLink], template: "<div class=\"tw-mb-l tw-flex tw-min-h-xxl tw-items-start tw-justify-between tw-gap-xl\">\n  <div class=\"tw-flex tw-flex-col tw-items-start\">\n    <div class=\"tw-flex tw-items-center tw-justify-start\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"-tw-mb-s tw-mt-xs tw-flex tw-self-start\">\n      <ng-content select=\"[header-content]\" />\n    </div>\n  </div>\n  <div class=\"tw-flex tw-items-start tw-justify-end tw-gap-xs tw-self-center tw-text-nowrap\">\n    <ng-content select=\"[header-buttons]\" />\n  </div>\n</div>\n\n@if (showDivider()) {\n  <div data-testid=\"header-divider\" class=\"tw-mb-l tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n}\n" }]
+        }] });
+
 /**
  * Skeleton is a component that can be used to show a loading state of a component.
  *
@@ -6339,49 +6438,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }] } });
 
-/**
- * @ignore
- * Displays Font Awesome icons.
- */
-class IconComponent {
-    constructor() {
-        this.NAME = 'IconComponent';
-        this.color = '#000';
-        this.fontAwsomeStyle = 'regular';
-        this.size = '14px';
-        this.iconStyleMap = {
-            solid: 'fas',
-            regular: 'far',
-            light: 'fal'
-        };
-        this.iconStyle = 'far';
-    }
-    ngOnChanges(changes) {
-        if ('fontAwsomeStyle' in changes) {
-            this.iconStyle = this.iconStyleMap[this.fontAwsomeStyle];
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: IconComponent, isStandalone: true, selector: "lx-icon", inputs: { name: "name", color: "color", fontAwsomeStyle: "fontAwsomeStyle", size: "size", title: "title" }, host: { properties: { "style.height": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fontAwsomeStyle: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.height']
-            }], title: [{
-                type: Input
-            }] } });
-
 class InputComponent {
     constructor(ngControl) {
         this.ngControl = ngControl;
@@ -8859,7 +8915,6 @@ const FORMS_MODULE_EXPORTS = [
     FilterSelectionPipe,
     FilterTermPipe,
     FormErrorComponent,
-    IconComponent,
     KeyboardActionSourceDirective,
     MarkInvalidDirective,
     MultiSelectComponent,
@@ -8908,7 +8963,6 @@ class LxFormsModule {
             FilterSelectionPipe,
             FilterTermPipe,
             FormErrorComponent,
-            IconComponent,
             KeyboardActionSourceDirective,
             MarkInvalidDirective,
             MultiSelectComponent,
@@ -8946,7 +9000,6 @@ class LxFormsModule {
             FilterSelectionPipe,
             FilterTermPipe,
             FormErrorComponent,
-            IconComponent,
             KeyboardActionSourceDirective,
             MarkInvalidDirective,
             MultiSelectComponent,
@@ -9020,7 +9073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         FilterSelectionPipe,
                         FilterTermPipe,
                         FormErrorComponent,
-                        IconComponent,
                         KeyboardActionSourceDirective,
                         MarkInvalidDirective,
                         MultiSelectComponent,
@@ -11678,5 +11730,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, 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, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, 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, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, 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, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, 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, PageHeaderComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
 //# sourceMappingURL=leanix-components.mjs.map