@leanix/components 0.4.263 → 0.4.265

package/fesm2022/leanix-components.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, Host
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1 from '@angular/common';
-import { NgClass, CommonModule, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
+import { CommonModule, NgIf, NgClass, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -13,15 +13,15 @@ import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toSt
 import * as i5 from 'rxjs';
 import { BehaviorSubject, timer, Observable, Subject, combineLatest, concat, merge, fromEvent, ReplaySubject, of, map as map$1, switchMap as switchMap$1 } from 'rxjs';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, withLatestFrom, take, debounceTime, skip, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
+import * as i1$a from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
+import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
+import * as i1$3 from '@angular/cdk/bidi';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import DOMPurify from 'dompurify';
 import { isArray, isEqual, split, uniqueId, isString, pick, intersection, isNil, curry } from 'lodash-es';
 import { Renderer, marked } from 'marked';
-import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import * as i1$3 from '@angular/cdk/bidi';
-import * as i1$a from '@angular/router';
-import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$5 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -51,26 +51,48 @@ const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
 const LOCALE_FN = new InjectionToken('LOCALE_FN');
 const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
 
-class CounterComponent {
+class BadgeComponent {
     constructor() {
-        this.size = 'default';
-        this.color = 'primary';
+        this.color = 'blue';
+        this.calculateColorsDynamically = false;
+        this.textColor = '';
+        this.backGroundColor = '';
     }
-    get classes() {
-        return `${this.size} ${this.color}`;
+    ngOnInit() {
+        if (this.calculateColorsDynamically) {
+            this.calculateColorsFromText();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:12px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:12px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.yellow{background-color:#ffb62a;color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    get colorClass() {
+        if (this.calculateColorsDynamically) {
+            return '';
+        }
+        else {
+            return `${this.color}`;
+        }
+    }
+    calculateColorsFromText() {
+        let hash = 0;
+        const contentAsString = String(this.content);
+        for (let i = 0; i < contentAsString.length; i++) {
+            hash = contentAsString.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        this.backGroundColor = `hsla(${hash % 360}, 100%, 58%, 0.12)`;
+        this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color", calculateColorsDynamically: "calculateColorsDynamically" }, ngImport: i0, template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.2rem .4rem;max-width:max-content;font-weight:400}.gray{background-color:#e1e5eb;color:#3e495b}.blue{background-color:#b9d8ff;color:#0a3e6b}.green{background-color:#c6f1d0;color:#145027}.red{background-color:#fdd3d3;color:#731616}.yellow{background-color:#ffebc4;color:#78350f}.purple{background-color:#d6cceb;color:#531991}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-counter', standalone: true, imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:12px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:12px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.yellow{background-color:#ffb62a;color:#fff}\n"] }]
+            args: [{ selector: 'lx-badge', standalone: true, imports: [CommonModule], template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.2rem .4rem;max-width:max-content;font-weight:400}.gray{background-color:#e1e5eb;color:#3e495b}.blue{background-color:#b9d8ff;color:#0a3e6b}.green{background-color:#c6f1d0;color:#145027}.red{background-color:#fdd3d3;color:#731616}.yellow{background-color:#ffebc4;color:#78350f}.purple{background-color:#d6cceb;color:#531991}\n"] }]
         }], propDecorators: { content: [{
-                type: Input
-            }], size: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], color: [{
                 type: Input
+            }], calculateColorsDynamically: [{
+                type: Input
             }] } });
 
 const BANNER_TYPE = {
@@ -540,6 +562,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 type: Input
             }] } });
 
+class CounterComponent {
+    constructor() {
+        this.size = 'default';
+        this.color = 'primary';
+    }
+    get classes() {
+        return `${this.size} ${this.color}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:12px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:12px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.yellow{background-color:#ffb62a;color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-counter', standalone: true, imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:12px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:12px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.yellow{background-color:#ffb62a;color:#fff}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
 /**
  * Observe creates an Observable stream and notifies the changes from an observed property.
  *
@@ -926,6 +970,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 type: Input
             }] } });
 
+class IntegrationLinkCardGroupComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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){border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):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: "17.1.0", 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){border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):after{content:\"\";width:187px;height:1px;background:#b2bccc;position:absolute;bottom:-1px;z-index:2;left:8px}\n"] }]
+        }] });
+
+class IntegrationLinkCardComponent {
+    constructor() {
+        this.actionButtonClicked = new EventEmitter();
+        this.linkClicked = new EventEmitter();
+    }
+    onActionButtonClicked() {
+        this.actionButtonClicked.emit();
+    }
+    onLinkClicked(event) {
+        this.linkClicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: IntegrationLinkCardComponent, isStandalone: true, selector: "lx-integration-link-card", inputs: { sourceIconClasses: "sourceIconClasses", sourceName: "sourceName", title: "title", link: "link", externalLink: "externalLink", tooltipContent: "tooltipContent", badgeContent: "badgeContent", actionButtonName: "actionButtonName", timestamp: "timestamp", tertiaryInfo: "tertiaryInfo" }, outputs: { actionButtonClicked: "actionButtonClicked", linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"integration-link-card-body\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" />\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 [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [routerLink]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:203px;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size: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:700;font-size:14px;line-height:16px;margin:0}.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}\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: "17.1.0", 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\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" />\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 [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [routerLink]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:203px;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size: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:700;font-size:14px;line-height:16px;margin:0}.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}\n"] }]
+        }], propDecorators: { sourceIconClasses: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sourceName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], link: [{
+                type: Input,
+                args: [{ required: false }]
+            }], externalLink: [{
+                type: Input,
+                args: [{ required: false }]
+            }], tooltipContent: [{
+                type: Input,
+                args: [{ required: false }]
+            }], badgeContent: [{
+                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.
@@ -950,6 +1056,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 type: Input
             }] } });
 
+class StepperComponent extends CdkStepper {
+    // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
+    // Storybook smoke tests for stepper component are failing without this constructor
+    constructor(_dir, _changeDetectorRef, _elementRef) {
+        super(_dir, _changeDetectorRef, _elementRef);
+        this.size = 'normal';
+    }
+    get isSmallVariant() {
+        return this.size === 'small';
+    }
+    isCompleted(index) {
+        return index < this.selectedIndex;
+    }
+    isActiveStep(index) {
+        return index === this.selectedIndex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", 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: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:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.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: "17.1.0", 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: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:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.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 }] });
+
 class TableHeaderComponent {
     constructor(elmentRef, changeDetection) {
         this.elmentRef = elmentRef;
@@ -1928,136 +2058,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 }]
         }] });
 
-class BadgeComponent {
-    constructor() {
-        this.color = 'blue';
-        this.calculateColorsDynamically = false;
-        this.textColor = '';
-        this.backGroundColor = '';
-    }
-    ngOnInit() {
-        if (this.calculateColorsDynamically) {
-            this.calculateColorsFromText();
-        }
-    }
-    get colorClass() {
-        if (this.calculateColorsDynamically) {
-            return '';
-        }
-        else {
-            return `${this.color}`;
-        }
-    }
-    calculateColorsFromText() {
-        let hash = 0;
-        const contentAsString = String(this.content);
-        for (let i = 0; i < contentAsString.length; i++) {
-            hash = contentAsString.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        this.backGroundColor = `hsla(${hash % 360}, 100%, 58%, 0.12)`;
-        this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color", calculateColorsDynamically: "calculateColorsDynamically" }, ngImport: i0, template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.2rem .4rem;max-width:max-content;font-weight:400}.gray{background-color:#e1e5eb;color:#3e495b}.blue{background-color:#b9d8ff;color:#0a3e6b}.green{background-color:#c6f1d0;color:#145027}.red{background-color:#fdd3d3;color:#731616}.yellow{background-color:#ffebc4;color:#78350f}.purple{background-color:#d6cceb;color:#531991}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-badge', standalone: true, imports: [CommonModule], template: "@if (calculateColorsDynamically) {\n  <div class=\"badge\" [style.background-color]=\"backGroundColor\" [style.color]=\"textColor\">\n    <span>{{ content }}</span>\n  </div>\n} @else {\n  <div class=\"badge\" [ngClass]=\"colorClass\">\n    <span>{{ content }}</span>\n  </div>\n}\n", styles: [".badge{border-radius:.3rem;padding:.2rem .4rem;max-width:max-content;font-weight:400}.gray{background-color:#e1e5eb;color:#3e495b}.blue{background-color:#b9d8ff;color:#0a3e6b}.green{background-color:#c6f1d0;color:#145027}.red{background-color:#fdd3d3;color:#731616}.yellow{background-color:#ffebc4;color:#78350f}.purple{background-color:#d6cceb;color:#531991}\n"] }]
-        }], propDecorators: { content: [{
-                type: Input,
-                args: [{ required: true }]
-            }], color: [{
-                type: Input
-            }], calculateColorsDynamically: [{
-                type: Input
-            }] } });
-
-class StepperComponent extends CdkStepper {
-    // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
-    // Storybook smoke tests for stepper component are failing without this constructor
-    constructor(_dir, _changeDetectorRef, _elementRef) {
-        super(_dir, _changeDetectorRef, _elementRef);
-        this.size = 'normal';
-    }
-    get isSmallVariant() {
-        return this.size === 'small';
-    }
-    isCompleted(index) {
-        return index < this.selectedIndex;
-    }
-    isActiveStep(index) {
-        return index === this.selectedIndex;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, deps: [{ token: i1$3.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", 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: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:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.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: "17.1.0", 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: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:12px}@supports (-moz-appearance: none){.small-icon{top:-1px}}.content{margin-top:48px}.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 }] });
-
-class IntegrationLinkCardComponent {
-    constructor() {
-        this.actionButtonClicked = new EventEmitter();
-        this.linkClicked = new EventEmitter();
-    }
-    onActionButtonClicked() {
-        this.actionButtonClicked.emit();
-    }
-    onLinkClicked(event) {
-        this.linkClicked.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: IntegrationLinkCardComponent, isStandalone: true, selector: "lx-integration-link-card", inputs: { sourceIconClasses: "sourceIconClasses", sourceName: "sourceName", title: "title", link: "link", externalLink: "externalLink", tooltipContent: "tooltipContent", badgeContent: "badgeContent", actionButtonName: "actionButtonName", timestamp: "timestamp", tertiaryInfo: "tertiaryInfo" }, outputs: { actionButtonClicked: "actionButtonClicked", linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"integration-link-card-body\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" />\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 [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [routerLink]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:203px;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size: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:700;font-size:14px;line-height:16px;margin:0}.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}\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: "17.1.0", 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\">\n  @if (badgeContent) {\n    <div class=\"integration-link-card-badge\">\n      <lx-badge [content]=\"badgeContent\" />\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 [lxTooltip]=\"tooltipContent\" [lxTooltipPosition]=\"{ y: 'top', x: 'left' }\" [routerLink]=\"link\" (click)=\"onLinkClicked($event)\">\n          <i class=\"far fa-arrow-circle-right\" aria-hidden=\"true\"></i>\n        </a>\n      }\n    }\n  </div>\n}\n", styles: [":host{width:203px;border-radius:4px;position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:4px;background-color:#e1e5eb;font-size: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:700;font-size:14px;line-height:16px;margin:0}.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}\n"] }]
-        }], propDecorators: { sourceIconClasses: [{
-                type: Input,
-                args: [{ required: true }]
-            }], sourceName: [{
-                type: Input,
-                args: [{ required: true }]
-            }], title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], link: [{
-                type: Input,
-                args: [{ required: false }]
-            }], externalLink: [{
-                type: Input,
-                args: [{ required: false }]
-            }], tooltipContent: [{
-                type: Input,
-                args: [{ required: false }]
-            }], badgeContent: [{
-                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
-            }] } });
-
-class IntegrationLinkCardGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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){border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):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: "17.1.0", 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){border-top-left-radius:0;border-top-right-radius:0;padding-top:4px}:host::ng-deep lx-integration-link-card:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}:host::ng-deep lx-integration-link-card:not(:last-child):after{content:\"\";width:187px;height:1px;background:#b2bccc;position:absolute;bottom:-1px;z-index:2;left:8px}\n"] }]
-        }] });
-
 class LxCoreUiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, imports: [i1$2.TranslateModule, AfterViewInitDirective,