@leanix/components 0.4.442 → 0.4.444

package/fesm2022/leanix-components.mjs

@@ -11,19 +11,19 @@ import { BehaviorSubject, timer, Observable, Subject, combineLatest, merge, conc
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
 import * as i1$9 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
-import * as i3 from '@angular/cdk/portal';
-import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
-import * as i1$2 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import * as i2 from '@angular/cdk/a11y';
-import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import * as i1$3 from '@angular/cdk/bidi';
+import * as i1$2 from '@angular/cdk/bidi';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import DOMPurify from 'dompurify';
 import { isArray, isEqual, split, uniqueId, pick, intersection, isNil, curry } from 'lodash-es';
 import { Renderer, marked } from 'marked';
+import * as i3 from '@angular/cdk/portal';
+import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/a11y';
+import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@ncstate/sat-popover';
 import { SatPopoverComponent, SatPopoverModule } from '@ncstate/sat-popover';
@@ -815,347 +815,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
-class IntegrationLinkCardGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IntegrationLinkCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: IntegrationLinkCardGroupComponent, isStandalone: true, selector: "lx-integration-link-card-group", ngImport: i0, template: "<ng-content />\n", styles: [":host::ng-deep lx-integration-link-card:not(:first-child),:host::ng-deep .integration-link-card-container:not(:first-child)>lx-integration-link-card{border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child),:host::ng-deep .integration-link-card-container:not(:last-child)>lx-integration-link-card{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):after,:host::ng-deep .integration-link-card-container:not(:last-child)>lx-integration-link-card:after{content:\"\";width:187px;height:1px;background:#b2bccc;position:absolute;bottom:-1px;z-index:2;left:8px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IntegrationLinkCardGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-integration-link-card-group', standalone: true, template: "<ng-content />\n", styles: [":host::ng-deep lx-integration-link-card:not(:first-child),:host::ng-deep .integration-link-card-container:not(:first-child)>lx-integration-link-card{border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child),:host::ng-deep .integration-link-card-container:not(:last-child)>lx-integration-link-card{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):after,:host::ng-deep .integration-link-card-container:not(:last-child)>lx-integration-link-card:after{content:\"\";width:187px;height:1px;background:#b2bccc;position:absolute;bottom:-1px;z-index:2;left:8px}\n"] }]
-        }] });
-
-function toCdkX(x) {
-    switch (x) {
-        case 'left':
-            return 'start';
-        case 'center':
-            return 'center';
-        case 'right':
-            return 'end';
-    }
-}
-function invertCdkX(x) {
-    switch (x) {
-        case 'start':
-            return 'end';
-        case 'center':
-            return 'center';
-        case 'end':
-            return 'start';
-    }
-}
-function invertCdkY(x) {
-    switch (x) {
-        case 'top':
-            return 'bottom';
-        case 'center':
-            return 'center';
-        case 'bottom':
-            return 'top';
-    }
-}
-function offsetYDirection(x) {
-    switch (x) {
-        case 'top':
-            return -6;
-        case 'center':
-            return 0;
-        case 'bottom':
-            return 6;
-    }
-}
-function offsetXDirection(position) {
-    switch (position.y) {
-        case 'center':
-            switch (position.x) {
-                case 'left':
-                    return -6;
-                case 'center':
-                    return 0;
-                case 'right':
-                    return 6;
-            }
-        case 'top':
-        case 'bottom':
-            switch (position.x) {
-                case 'left':
-                    return 30;
-                case 'center':
-                    return 0;
-                case 'right':
-                    return -30;
-            }
-    }
-}
-function toCdkPosition(position) {
-    return {
-        originX: toCdkX(position.x),
-        originY: position.y,
-        overlayX: invertCdkX(toCdkX(position.x)),
-        overlayY: invertCdkY(position.y),
-        offsetY: offsetYDirection(position.y),
-        offsetX: offsetXDirection(position)
-    };
-}
-
-function isValidX(x) {
-    return ['left', 'center', 'right'].includes(x);
-}
-function isValidY(y) {
-    return ['top', 'center', 'bottom'].includes(y);
-}
-
-class TooltipComponent {
-    constructor() {
-        this.content = '';
-        this.isHtmlContent = false;
-        this.position = {
-            x: 'center',
-            y: 'top'
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TooltipComponent, isStandalone: true, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:var(--lxFontSmallSize, 12px);font-weight:var(--lxFontNormal, 400);text-shadow:0 1px black;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.y-bottom:after,.y-top:after,.x-left:after,.x-right:after{content:\" \";position:absolute;border-width:5px;border-style:solid;border-color:#292929 transparent transparent transparent}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-top.x-center:after,.y-bottom.x-center:after{left:50%}.y-top.x-left:after,.y-bottom.x-left:after{right:10px}.y-top.x-right:after,.y-bottom.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-tooltip', standalone: true, imports: [NgIf, NgClass], host: { role: 'tooltip' }, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:var(--lxFontSmallSize, 12px);font-weight:var(--lxFontNormal, 400);text-shadow:0 1px black;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.y-bottom:after,.y-top:after,.x-left:after,.x-right:after{content:\" \";position:absolute;border-width:5px;border-style:solid;border-color:#292929 transparent transparent transparent}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-top.x-center:after,.y-bottom.x-center:after{left:50%}.y-top.x-left:after,.y-bottom.x-left:after{right:10px}.y-top.x-right:after,.y-bottom.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}\n"] }]
-        }], propDecorators: { content: [{
-                type: Input
-            }], isHtmlContent: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
-/**
- * Tooltip directive is used to show a tooltip on hover or focus on an element.
- *
- * ## Usage
- *
- * 1. Import the `TooltipDirective` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
- *
- * ```ts
- * import { TooltipDirective } from '@leanix/components';
- * ```
- */
-class TooltipDirective {
-    /** The position of the tooltip. */
-    set lxTooltipPosition(value) {
-        this.position = {
-            x: value && isValidX(value.x) ? value.x : 'center',
-            y: value && isValidY(value.y) ? value.y : 'top'
-        };
-    }
-    get positionStrategy() {
-        return this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([toCdkPosition(this.position)]);
-    }
-    constructor(overlayPositionBuilder, elementRef, overlay, ariaDescriber) {
-        this.overlayPositionBuilder = overlayPositionBuilder;
-        this.elementRef = elementRef;
-        this.overlay = overlay;
-        this.ariaDescriber = ariaDescriber;
-        this.position = {
-            x: 'center',
-            y: 'top'
-        };
-        /** Whether the tooltip content is HTML. */
-        this.lxTooltipIsHtmlContent = false;
-        this.mouseOrFocusOnHost = false;
-    }
-    ngOnChanges(changes) {
-        if (this.overlayRef && changes['lxTooltipPosition']) {
-            this.overlayRef.updatePositionStrategy(this.positionStrategy);
-        }
-        if (this.tooltipRef) {
-            if (changes['lxTooltipPosition']) {
-                this.tooltipRef.instance.position = this.position;
-            }
-            if (changes['lxTooltipIsHtmlContent']) {
-                this.tooltipRef.instance.isHtmlContent = this.lxTooltipIsHtmlContent;
-            }
-            if (changes['content']) {
-                if (this.content) {
-                    this.tooltipRef.instance.content = this.content;
-                    this.overlayRef?.updatePosition();
-                }
-                else {
-                    this.overlayRef?.detach();
-                }
-            }
-        }
-    }
-    /** @internal */
-    show() {
-        this.mouseOrFocusOnHost = true;
-        setTimeout(() => {
-            if (!this.overlayRef?.hasAttached() && this.mouseOrFocusOnHost && this.content) {
-                this.overlayRef = this.overlay.create({ positionStrategy: this.positionStrategy });
-                const tooltipPortal = new ComponentPortal(TooltipComponent);
-                this.tooltipRef = this.overlayRef.attach(tooltipPortal);
-                this.tooltipRef.instance.content = this.content;
-                this.tooltipRef.instance.isHtmlContent = this.lxTooltipIsHtmlContent;
-                this.tooltipRef.instance.position = this.position;
-                this.ariaDescriber.describe(this.elementRef.nativeElement, this.tooltipRef.location.nativeElement);
-            }
-        }, this.lxTooltipDelay ?? 90);
-    }
-    ngOnDestroy() {
-        this.mouseOrFocusOnHost = false;
-        this.overlayRef?.dispose();
-    }
-    /** @internal */
-    hide() {
-        this.mouseOrFocusOnHost = false;
-        this.ariaDescriber.removeDescription(this.elementRef.nativeElement, this.tooltipRef?.location.nativeElement);
-        this.overlayRef?.dispose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: TooltipDirective, isStandalone: true, selector: "[lxTooltip]", inputs: { content: ["lxTooltip", "content"], lxTooltipPosition: "lxTooltipPosition", lxTooltipDelay: "lxTooltipDelay", lxTooltipIsHtmlContent: "lxTooltipIsHtmlContent" }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "click": "hide()", "blur": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxTooltip]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { content: [{
-                type: Input,
-                args: ['lxTooltip']
-            }], lxTooltipPosition: [{
-                type: Input
-            }], lxTooltipDelay: [{
-                type: Input
-            }], lxTooltipIsHtmlContent: [{
-                type: Input
-            }], show: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }, {
-                type: HostListener,
-                args: ['focus']
-            }], hide: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }, {
-                type: HostListener,
-                args: ['click']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-/**
- * Integration Link Card Component is a card component that displays information about an integration link.
- *
- * This documentation provides details on the usage and configuration of the Integration Link Card Component.
- *
- * ## Usage
- *
- * 1. Import `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component, or in case of a standalone parent component, import the
- *    `IntegrationLinkCardComponent` directly into your standalone component.
- *
- * - Module import:
- *
- * ```ts
- * import { LxCoreUiModule } from '@leanix/components';
- * ```
- *
- * - Standalone component import:
- *
- * ```ts
- * import { IntegrationLinkCardComponent } from '@leanix/components';
- *
- * @Component({
- *   selector: 'lx-my-component',
- *   standalone: true,
- *   imports: [IntegrationLinkCardComponent],
- *   templateUrl: './my-component.component.html'
- * })
- * export class MyComponent {}
- * ```
- *
- * ## Usage
- *
- * #### Required Inputs:
- *
- * - `sourceIconClasses` (`string`) - font awesome classes for source icon;
- * - `sourceName` (`string`) - the name of the source associated with the integration card;
- * - `title` (`string`) - the main title of the integration card.
- */
-class IntegrationLinkCardComponent {
-    constructor() {
-        /**
-         * Determines if the integration is in an inactive state
-         * When set to true, the card will display in an inactive state
-         * */
-        this.isInactive = false;
-        /** Color for a badge element on the card */
-        this.badgeColor = 'blue';
-        /** Event emitted when the action button is clicked */
-        this.actionButtonClicked = new EventEmitter();
-        /** Event emitted when the link is clicked */
-        this.linkClicked = new EventEmitter();
-    }
-    /** @internal */
-    onActionButtonClicked() {
-        this.actionButtonClicked.emit();
-    }
-    /** @internal */
-    onLinkClicked(event) {
-        this.linkClicked.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IntegrationLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: IntegrationLinkCardComponent, isStandalone: true, selector: "lx-integration-link-card", inputs: { sourceIconClasses: "sourceIconClasses", sourceName: "sourceName", title: "title", isInactive: "isInactive", link: "link", queryParams: "queryParams", externalLink: "externalLink", tooltipContent: "tooltipContent", badgeContent: "badgeContent", badgeColor: "badgeColor", actionButtonName: "actionButtonName", timestamp: "timestamp", tertiaryInfo: "tertiaryInfo" }, outputs: { actionButtonClicked: "actionButtonClicked", linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"integration-link-card-body {{ isInactive ? 'inactive-link' : '' }}\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" [color]=\"badgeColor\" />\n    </div>\n  }\n  <div class=\"integration-link-card-source\"><i [class]=\"sourceIconClasses\" aria-hidden=\"true\"></i>{{ sourceName }}</div>\n  <h2 class=\"integration-link-card-heading\">{{ title }}</h2>\n  @if (tertiaryInfo) {\n    <div class=\"integration-link-card-tertiary-info\">{{ tertiaryInfo }}</div>\n  }\n  @if (timestamp) {\n    <div class=\"integration-link-card-timestamp\">{{ timestamp }}</div>\n  }\n  @if (actionButtonName) {\n    <button lx-button color=\"light\" class=\"integration-link-card-action-button\" (click)=\"onActionButtonClicked()\">\n      {{ actionButtonName }}\n    </button>\n  }\n</div>\n@if (link) {\n  <div class=\"integration-link-card-link\">\n    @if (externalLink) {\n      <a\n        [href]=\"link\"\n        [attr.target]=\"'_blank'\"\n        [attr.rel]=\"'noopener norefferer'\"\n        [lxTooltip]=\"tooltipContent\"\n        [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\"\n        (click)=\"onLinkClicked($event)\"\n      >\n        <i class=\"far fa-external-link\" aria-hidden=\"true\"></i>\n      </a>\n    } @else {\n      @if (link.startsWith('http')) {\n        <a [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [href]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      } @else {\n        <a\n          [lxTooltip]=\"tooltipContent\"\n          [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\"\n          [routerLink]=\"link\"\n          [queryParams]=\"queryParams\"\n          (click)=\"onLinkClicked($event)\"\n        >\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:100%;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size:var(--lxFontSmallSize, 12px)}.integration-link-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:8px}.integration-link-card-badge{margin-bottom:8px}.integration-link-card-source{margin-bottom:4px}.integration-link-card-source i{margin-right:4px}.integration-link-card-tertiary-info{margin-bottom:4px;color:#99a5bb}.integration-link-card-timestamp{margin-bottom:4px;color:#526179}.integration-link-card-action-button{margin:4px 0}.integration-link-card-heading{padding-bottom:4px;font-weight:var(--lxFontBold, 700);font-size:var(--lxFontHeader5Size, 14px);line-height:16px;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:160px}.integration-link-card-link{width:30px;height:30px;display:flex;justify-content:center;align-items:center;align-self:center;transition:background-color .18s;transition-delay:0s;transition-timing-function:ease;cursor:pointer}.integration-link-card-link:hover,.integration-link-card-link:focus{text-decoration:none}.inactive-link *{color:#61779d}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "color", "calculateColorsDynamically"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IntegrationLinkCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-integration-link-card', standalone: true, imports: [TooltipDirective, BadgeComponent, ButtonComponent, RouterLink], template: "<div class=\"integration-link-card-body {{ isInactive ? 'inactive-link' : '' }}\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" [color]=\"badgeColor\" />\n    </div>\n  }\n  <div class=\"integration-link-card-source\"><i [class]=\"sourceIconClasses\" aria-hidden=\"true\"></i>{{ sourceName }}</div>\n  <h2 class=\"integration-link-card-heading\">{{ title }}</h2>\n  @if (tertiaryInfo) {\n    <div class=\"integration-link-card-tertiary-info\">{{ tertiaryInfo }}</div>\n  }\n  @if (timestamp) {\n    <div class=\"integration-link-card-timestamp\">{{ timestamp }}</div>\n  }\n  @if (actionButtonName) {\n    <button lx-button color=\"light\" class=\"integration-link-card-action-button\" (click)=\"onActionButtonClicked()\">\n      {{ actionButtonName }}\n    </button>\n  }\n</div>\n@if (link) {\n  <div class=\"integration-link-card-link\">\n    @if (externalLink) {\n      <a\n        [href]=\"link\"\n        [attr.target]=\"'_blank'\"\n        [attr.rel]=\"'noopener norefferer'\"\n        [lxTooltip]=\"tooltipContent\"\n        [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\"\n        (click)=\"onLinkClicked($event)\"\n      >\n        <i class=\"far fa-external-link\" aria-hidden=\"true\"></i>\n      </a>\n    } @else {\n      @if (link.startsWith('http')) {\n        <a [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [href]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      } @else {\n        <a\n          [lxTooltip]=\"tooltipContent\"\n          [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\"\n          [routerLink]=\"link\"\n          [queryParams]=\"queryParams\"\n          (click)=\"onLinkClicked($event)\"\n        >\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:100%;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size:var(--lxFontSmallSize, 12px)}.integration-link-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:8px}.integration-link-card-badge{margin-bottom:8px}.integration-link-card-source{margin-bottom:4px}.integration-link-card-source i{margin-right:4px}.integration-link-card-tertiary-info{margin-bottom:4px;color:#99a5bb}.integration-link-card-timestamp{margin-bottom:4px;color:#526179}.integration-link-card-action-button{margin:4px 0}.integration-link-card-heading{padding-bottom:4px;font-weight:var(--lxFontBold, 700);font-size:var(--lxFontHeader5Size, 14px);line-height:16px;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:160px}.integration-link-card-link{width:30px;height:30px;display:flex;justify-content:center;align-items:center;align-self:center;transition:background-color .18s;transition-delay:0s;transition-timing-function:ease;cursor:pointer}.integration-link-card-link:hover,.integration-link-card-link:focus{text-decoration:none}.inactive-link *{color:#61779d}\n"] }]
-        }], propDecorators: { sourceIconClasses: [{
-                type: Input,
-                args: [{ required: true }]
-            }], sourceName: [{
-                type: Input,
-                args: [{ required: true }]
-            }], title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], isInactive: [{
-                type: Input,
-                args: [{ required: false }]
-            }], link: [{
-                type: Input,
-                args: [{ required: false }]
-            }], queryParams: [{
-                type: Input,
-                args: [{ required: false }]
-            }], externalLink: [{
-                type: Input,
-                args: [{ required: false }]
-            }], tooltipContent: [{
-                type: Input,
-                args: [{ required: false }]
-            }], badgeContent: [{
-                type: Input,
-                args: [{ required: false }]
-            }], badgeColor: [{
-                type: Input,
-                args: [{ required: false }]
-            }], actionButtonName: [{
-                type: Input,
-                args: [{ required: false }]
-            }], timestamp: [{
-                type: Input,
-                args: [{ required: false }]
-            }], tertiaryInfo: [{
-                type: Input,
-                args: [{ required: false }]
-            }], actionButtonClicked: [{
-                type: Output
-            }], linkClicked: [{
-                type: Output
-            }] } });
-
 /**
  * The following CSS classes should be used to style this component. The use of the inputs is deprecated.
  * - fullSpace: Sets position to absolute with full height and width => fills ancestor with position set.
@@ -1236,13 +895,13 @@ class StepperComponent extends CdkStepper {
     isActiveStep(index) {
         return index === this.selectedIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StepperComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StepperComponent, deps: [{ token: i1$2.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: StepperComponent, isStandalone: true, selector: "lx-stepper", providers: [{ provide: CdkStepper, useExisting: StepperComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:var(--lxFontNormal, 400);line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#0070f2}.small-icon{position:relative;font-size:var(--lxFontSmallSize, 12px)}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CdkStepperModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-stepper', standalone: true, imports: [CommonModule, CdkStepperModule], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <i [class]=\"'far fa-check check-icon'\" [ngClass]=\"{ 'small-icon': isSmallVariant }\"></i>\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:15.5px;font-style:normal;font-weight:var(--lxFontNormal, 400);line-height:20px;width:100%;height:100%;padding-top:8px;text-align:center}.step-container-small .step-number{padding-top:0}.step-title{width:max-content;top:50px;position:absolute}.check-icon{font-size:20px;color:#0070f2}.small-icon{position:relative;font-size:var(--lxFontSmallSize, 12px)}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i1$2.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
 
 class TableHeaderComponent {
     constructor(elmentRef, changeDetection) {
@@ -2222,6 +1881,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
+function toCdkX(x) {
+    switch (x) {
+        case 'left':
+            return 'start';
+        case 'center':
+            return 'center';
+        case 'right':
+            return 'end';
+    }
+}
+function invertCdkX(x) {
+    switch (x) {
+        case 'start':
+            return 'end';
+        case 'center':
+            return 'center';
+        case 'end':
+            return 'start';
+    }
+}
+function invertCdkY(x) {
+    switch (x) {
+        case 'top':
+            return 'bottom';
+        case 'center':
+            return 'center';
+        case 'bottom':
+            return 'top';
+    }
+}
+function offsetYDirection(x) {
+    switch (x) {
+        case 'top':
+            return -6;
+        case 'center':
+            return 0;
+        case 'bottom':
+            return 6;
+    }
+}
+function offsetXDirection(position) {
+    switch (position.y) {
+        case 'center':
+            switch (position.x) {
+                case 'left':
+                    return -6;
+                case 'center':
+                    return 0;
+                case 'right':
+                    return 6;
+            }
+        case 'top':
+        case 'bottom':
+            switch (position.x) {
+                case 'left':
+                    return 30;
+                case 'center':
+                    return 0;
+                case 'right':
+                    return -30;
+            }
+    }
+}
+function toCdkPosition(position) {
+    return {
+        originX: toCdkX(position.x),
+        originY: position.y,
+        overlayX: invertCdkX(toCdkX(position.x)),
+        overlayY: invertCdkY(position.y),
+        offsetY: offsetYDirection(position.y),
+        offsetX: offsetXDirection(position)
+    };
+}
+
+function isValidX(x) {
+    return ['left', 'center', 'right'].includes(x);
+}
+function isValidY(y) {
+    return ['top', 'center', 'bottom'].includes(y);
+}
+
+class TooltipComponent {
+    constructor() {
+        this.content = '';
+        this.isHtmlContent = false;
+        this.position = {
+            x: 'center',
+            y: 'top'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TooltipComponent, isStandalone: true, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:var(--lxFontSmallSize, 12px);font-weight:var(--lxFontNormal, 400);text-shadow:0 1px black;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.y-bottom:after,.y-top:after,.x-left:after,.x-right:after{content:\" \";position:absolute;border-width:5px;border-style:solid;border-color:#292929 transparent transparent transparent}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-top.x-center:after,.y-bottom.x-center:after{left:50%}.y-top.x-left:after,.y-bottom.x-left:after{right:10px}.y-top.x-right:after,.y-bottom.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-tooltip', standalone: true, imports: [NgIf, NgClass], host: { role: 'tooltip' }, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n  <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:var(--lxFontSmallSize, 12px);font-weight:var(--lxFontNormal, 400);text-shadow:0 1px black;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.y-bottom:after,.y-top:after,.x-left:after,.x-right:after{content:\" \";position:absolute;border-width:5px;border-style:solid;border-color:#292929 transparent transparent transparent}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-top.x-center:after,.y-bottom.x-center:after{left:50%}.y-top.x-left:after,.y-bottom.x-left:after{right:10px}.y-top.x-right:after,.y-bottom.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], isHtmlContent: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+/**
+ * Tooltip directive is used to show a tooltip on hover or focus on an element.
+ *
+ * ## Usage
+ *
+ * 1. Import the `TooltipDirective` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
+ *
+ * ```ts
+ * import { TooltipDirective } from '@leanix/components';
+ * ```
+ */
+class TooltipDirective {
+    /** The position of the tooltip. */
+    set lxTooltipPosition(value) {
+        this.position = {
+            x: value && isValidX(value.x) ? value.x : 'center',
+            y: value && isValidY(value.y) ? value.y : 'top'
+        };
+    }
+    get positionStrategy() {
+        return this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([toCdkPosition(this.position)]);
+    }
+    constructor(overlayPositionBuilder, elementRef, overlay, ariaDescriber) {
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.elementRef = elementRef;
+        this.overlay = overlay;
+        this.ariaDescriber = ariaDescriber;
+        this.position = {
+            x: 'center',
+            y: 'top'
+        };
+        /** Whether the tooltip content is HTML. */
+        this.lxTooltipIsHtmlContent = false;
+        this.mouseOrFocusOnHost = false;
+    }
+    ngOnChanges(changes) {
+        if (this.overlayRef && changes['lxTooltipPosition']) {
+            this.overlayRef.updatePositionStrategy(this.positionStrategy);
+        }
+        if (this.tooltipRef) {
+            if (changes['lxTooltipPosition']) {
+                this.tooltipRef.instance.position = this.position;
+            }
+            if (changes['lxTooltipIsHtmlContent']) {
+                this.tooltipRef.instance.isHtmlContent = this.lxTooltipIsHtmlContent;
+            }
+            if (changes['content']) {
+                if (this.content) {
+                    this.tooltipRef.instance.content = this.content;
+                    this.overlayRef?.updatePosition();
+                }
+                else {
+                    this.overlayRef?.detach();
+                }
+            }
+        }
+    }
+    /** @internal */
+    show() {
+        this.mouseOrFocusOnHost = true;
+        setTimeout(() => {
+            if (!this.overlayRef?.hasAttached() && this.mouseOrFocusOnHost && this.content) {
+                this.overlayRef = this.overlay.create({ positionStrategy: this.positionStrategy });
+                const tooltipPortal = new ComponentPortal(TooltipComponent);
+                this.tooltipRef = this.overlayRef.attach(tooltipPortal);
+                this.tooltipRef.instance.content = this.content;
+                this.tooltipRef.instance.isHtmlContent = this.lxTooltipIsHtmlContent;
+                this.tooltipRef.instance.position = this.position;
+                this.ariaDescriber.describe(this.elementRef.nativeElement, this.tooltipRef.location.nativeElement);
+            }
+        }, this.lxTooltipDelay ?? 90);
+    }
+    ngOnDestroy() {
+        this.mouseOrFocusOnHost = false;
+        this.overlayRef?.dispose();
+    }
+    /** @internal */
+    hide() {
+        this.mouseOrFocusOnHost = false;
+        this.ariaDescriber.removeDescription(this.elementRef.nativeElement, this.tooltipRef?.location.nativeElement);
+        this.overlayRef?.dispose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: TooltipDirective, isStandalone: true, selector: "[lxTooltip]", inputs: { content: ["lxTooltip", "content"], lxTooltipPosition: "lxTooltipPosition", lxTooltipDelay: "lxTooltipDelay", lxTooltipIsHtmlContent: "lxTooltipIsHtmlContent" }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "click": "hide()", "blur": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2.AriaDescriber }], propDecorators: { content: [{
+                type: Input,
+                args: ['lxTooltip']
+            }], lxTooltipPosition: [{
+                type: Input
+            }], lxTooltipDelay: [{
+                type: Input
+            }], lxTooltipIsHtmlContent: [{
+                type: Input
+            }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focus']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['click']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 class LxCoreUiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LxCoreUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: LxCoreUiModule, imports: [i1$1.TranslateModule, AfterViewInitDirective,
@@ -2240,8 +2120,6 @@ class LxCoreUiModule {
             HighlightRangePipe,
             HighlightTermPipe,
             IconScaleComponent,
-            IntegrationLinkCardComponent,
-            IntegrationLinkCardGroupComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
             LxTimeAgo,
@@ -2276,8 +2154,6 @@ class LxCoreUiModule {
             HighlightRangePipe,
             HighlightTermPipe,
             IconScaleComponent,
-            IntegrationLinkCardComponent,
-            IntegrationLinkCardGroupComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
             LxTimeAgo,
@@ -2302,7 +2178,6 @@ class LxCoreUiModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LxCoreUiModule, providers: [LxTimeAgo], imports: [TranslateModule.forChild(),
             BadgeComponent,
             BannerComponent,
-            IntegrationLinkCardComponent,
             StepperComponent,
             EmptyStateComponent] }); }
 }
@@ -2327,8 +2202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         HighlightRangePipe,
                         HighlightTermPipe,
                         IconScaleComponent,
-                        IntegrationLinkCardComponent,
-                        IntegrationLinkCardGroupComponent,
                         LxLinkifyPipe,
                         LxUnlinkifyPipe,
                         LxTimeAgo,
@@ -2366,8 +2239,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         HighlightRangePipe,
                         HighlightTermPipe,
                         IconScaleComponent,
-                        IntegrationLinkCardComponent,
-                        IntegrationLinkCardGroupComponent,
                         LxLinkifyPipe,
                         LxUnlinkifyPipe,
                         LxTimeAgo,
@@ -5565,7 +5436,7 @@ class KeyboardSortableItemDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$7.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$7.CdkDrag }, { token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: KeyboardSortableItemDirective, isStandalone: true, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -5574,7 +5445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[lxKeyboardSortableItem]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
+        }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
                 type: Input,
                 args: ['lxKeyboardSortableItem']
             }], itemData: [{
@@ -6882,13 +6753,13 @@ class OptionsDropdownComponent {
         const newEvent = new KeyboardEvent(event.type, newEventOptions);
         this.lxButton?.dispatchEvent(newEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning", dropdownClass: "dropdownClass", isFlexEnabledTriggerContainer: "isFlexEnabledTriggerContainer" }, outputs: { opened: "opened", closed: "closed", closedWithoutSelection: "closedWithoutSelection" }, host: { properties: { "style.display": "this.displayStyle" } }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class]=\"dropdownClass\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, NgClass, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div lxAutoclose (autoclose)=\"closeDropdown()\">\n    <div class=\"triggerContainer\" [ngClass]=\"{ flexDisplay: isFlexEnabledTriggerContainer }\" (click)=\"toggleOpen()\">\n      <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n    </div>\n    <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"toggleOpen()\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    (overlayOutsideClick)=\"closeDropdown(); closedWithoutSelection.emit()\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\" />\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\" />\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class]=\"dropdownClass\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content />\n  </ul>\n</ng-template>\n", styles: [":host{position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}.flexDisplay{display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
                 type: Input
             }], closeOnScroll: [{
                 type: Input
@@ -7317,7 +7188,7 @@ class PickerComponent {
     }
     propagateChange(_value) { }
     onTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PickerComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PickerComponent, deps: [{ token: i1$2.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -7335,7 +7206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => PickerComponent)
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AutocloseDirective], template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\" />\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content />\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
+        }], ctorParameters: () => [{ type: i1$2.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { listBoxAriaLabel: [{
                 type: Input
             }], listBoxAriaLabelledBy: [{
                 type: Input
@@ -9110,7 +8981,7 @@ class ModalComponent {
     trapFocusInModal(hostElement) {
         this.focusTrap.create(hostElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ModalComponent, deps: [{ token: i1$3.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal(closeLocation.CloseButton)\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\" />\n    <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\" />\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
             trigger('modal', [
                 transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
@@ -9126,7 +8997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             transition(':leave', animate('0.15s', style({ opacity: 0 })))
                         ])
                     ], standalone: true, imports: [PortalModule, NgIf, NgTemplateOutlet, TranslateModule], template: "<ng-template cdkPortal>\n  <div\n    *ngIf=\"open\"\n    role=\"dialog\"\n    class=\"lxmodal\"\n    [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n    [class.lxmodal--dialog]=\"size === 'dialog'\"\n    [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n    [class.lxmodal--withFooter]=\"!!footer\"\n    [class.lxmodal--verticalScroll]=\"verticalScroll\"\n    @modal\n  >\n    <div\n      *ngIf=\"size === 'fullscreen' && showBackButton\"\n      (click)=\"emitBack()\"\n      (keyup.enter)=\"emitBack()\"\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"fal fa-long-arrow-left\"\n    ></div>\n    <button\n      *ngIf=\"showCloseButton\"\n      (click)=\"closeModal(closeLocation.CloseButton)\"\n      [attr.aria-label]=\"NAME + '.close' | translate\"\n      class=\"fal fa-times closeButton\"\n    ></button>\n    <ng-content *ngIf=\"header\" select=\"lx-modal-header\" />\n    <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n    <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\" />\n  </div>\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -9852,5 +9723,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, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, 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, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, IntegrationLinkCardComponent, IntegrationLinkCardGroupComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, 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, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, 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, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, 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 };
 //# sourceMappingURL=leanix-components.mjs.map