@leanix/components 0.4.263 → 0.4.265

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/esm2022/lib/core-ui/components/badge/badge.component.mjs +2 -2
  2. package/esm2022/lib/core-ui/components/ellipsis/ellipsis.component.mjs +2 -2
  3. package/esm2022/lib/core-ui/components/empty-state/empty-state.component.mjs +2 -2
  4. package/esm2022/lib/core-ui/components/stepper/stepper.component.mjs +3 -3
  5. package/esm2022/lib/core-ui/core-ui.module.mjs +6 -6
  6. package/esm2022/lib/core-ui/directives/autoclose.directive.mjs +2 -2
  7. package/esm2022/lib/core-ui/tooltip/tooltip.directive.mjs +1 -1
  8. package/esm2022/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.mjs +2 -2
  9. package/esm2022/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.mjs +2 -2
  10. package/esm2022/lib/forms-ui/components/currency/currency-input.component.mjs +3 -3
  11. package/esm2022/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.mjs +1 -1
  12. package/esm2022/lib/forms-ui/components/keyboard-select.directive.mjs +2 -2
  13. package/esm2022/lib/forms-ui/components/multi-select/multi-select-selection/multi-select-selection.component.mjs +2 -2
  14. package/esm2022/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +2 -2
  15. package/esm2022/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs +2 -2
  16. package/esm2022/lib/forms-ui/components/picker/picker-trigger.directive.mjs +2 -2
  17. package/esm2022/lib/forms-ui/components/pill-list/pill-list.component.mjs +1 -1
  18. package/esm2022/lib/forms-ui/directives/form-error.directive.mjs +1 -1
  19. package/esm2022/lib/forms-ui/directives/form-submit.directive.mjs +1 -1
  20. package/esm2022/lib/forms-ui/directives/max-length-counter.directive.mjs +2 -3
  21. package/esm2022/lib/forms-ui/validators/string-not-in-array.validator.mjs +1 -1
  22. package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +2 -2
  23. package/fesm2022/leanix-components.mjs +147 -147
  24. package/fesm2022/leanix-components.mjs.map +1 -1
  25. package/lib/core-ui/components/stepper/stepper.component.d.ts +2 -2
  26. package/lib/forms-ui/directives/max-length-counter.directive.d.ts +1 -1
  27. package/package.json +1 -1
@@ -3,7 +3,7 @@ import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, Host
3
3
  import * as i1$2 from '@ngx-translate/core';
4
4
  import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
5
5
  import * as i1 from '@angular/common';
6
- import { NgClass, CommonModule, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
6
+ import { CommonModule, NgIf, NgClass, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, formatDate } from '@angular/common';
7
7
  import * as i3 from '@angular/cdk/portal';
8
8
  import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
9
9
  import * as i1$1 from '@angular/cdk/overlay';
@@ -13,15 +13,15 @@ import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toSt
13
13
  import * as i5 from 'rxjs';
14
14
  import { BehaviorSubject, timer, Observable, Subject, combineLatest, concat, merge, fromEvent, ReplaySubject, of, map as map$1, switchMap as switchMap$1 } from 'rxjs';
15
15
  import { skipWhile, map, switchMap, startWith, pairwise, filter, withLatestFrom, take, debounceTime, skip, distinctUntilChanged, takeUntil, delay, tap, first } from 'rxjs/operators';
16
+ import * as i1$a from '@angular/router';
17
+ import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
18
+ import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
19
+ import * as i1$3 from '@angular/cdk/bidi';
16
20
  import Color from 'color';
17
21
  import { format, distanceInWords, startOfDay } from 'date-fns';
18
22
  import DOMPurify from 'dompurify';
19
23
  import { isArray, isEqual, split, uniqueId, isString, pick, intersection, isNil, curry } from 'lodash-es';
20
24
  import { Renderer, marked } from 'marked';
21
- import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
22
- import * as i1$3 from '@angular/cdk/bidi';
23
- import * as i1$a from '@angular/router';
24
- import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
25
25
  import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
26
26
  import * as i1$5 from '@angular/cdk/clipboard';
27
27
  import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -51,26 +51,48 @@ const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
51
51
  const LOCALE_FN = new InjectionToken('LOCALE_FN');
52
52
  const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
53
53
 
54
- class CounterComponent {
54
+ class BadgeComponent {
55
55
  constructor() {
56
- this.size = 'default';
57
- this.color = 'primary';
56
+ this.color = 'blue';
57
+ this.calculateColorsDynamically = false;
58
+ this.textColor = '';
59
+ this.backGroundColor = '';
58
60
  }
59
- get classes() {
60
- return `${this.size} ${this.color}`;
61
+ ngOnInit() {
62
+ if (this.calculateColorsDynamically) {
63
+ this.calculateColorsFromText();
64
+ }
61
65
  }
62
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
63
- 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"] }] }); }
66
+ get colorClass() {
67
+ if (this.calculateColorsDynamically) {
68
+ return '';
69
+ }
70
+ else {
71
+ return `${this.color}`;
72
+ }
73
+ }
74
+ calculateColorsFromText() {
75
+ let hash = 0;
76
+ const contentAsString = String(this.content);
77
+ for (let i = 0; i < contentAsString.length; i++) {
78
+ hash = contentAsString.charCodeAt(i) + ((hash << 5) - hash);
79
+ }
80
+ this.backGroundColor = `hsla(${hash % 360}, 100%, 58%, 0.12)`;
81
+ this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
82
+ }
83
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
84
+ 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"] }] }); }
64
85
  }
65
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, decorators: [{
86
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
66
87
  type: Component,
67
- 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"] }]
88
+ 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"] }]
68
89
  }], propDecorators: { content: [{
69
- type: Input
70
- }], size: [{
71
- type: Input
90
+ type: Input,
91
+ args: [{ required: true }]
72
92
  }], color: [{
73
93
  type: Input
94
+ }], calculateColorsDynamically: [{
95
+ type: Input
74
96
  }] } });
75
97
 
76
98
  const BANNER_TYPE = {
@@ -540,6 +562,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
540
562
  type: Input
541
563
  }] } });
542
564
 
565
+ class CounterComponent {
566
+ constructor() {
567
+ this.size = 'default';
568
+ this.color = 'primary';
569
+ }
570
+ get classes() {
571
+ return `${this.size} ${this.color}`;
572
+ }
573
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
574
+ 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"] }] }); }
575
+ }
576
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CounterComponent, decorators: [{
577
+ type: Component,
578
+ 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"] }]
579
+ }], propDecorators: { content: [{
580
+ type: Input
581
+ }], size: [{
582
+ type: Input
583
+ }], color: [{
584
+ type: Input
585
+ }] } });
586
+
543
587
  /**
544
588
  * Observe creates an Observable stream and notifies the changes from an observed property.
545
589
  *
@@ -926,6 +970,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
926
970
  type: Input
927
971
  }] } });
928
972
 
973
+ class IntegrationLinkCardGroupComponent {
974
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
975
+ 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"] }); }
976
+ }
977
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, decorators: [{
978
+ type: Component,
979
+ 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"] }]
980
+ }] });
981
+
982
+ class IntegrationLinkCardComponent {
983
+ constructor() {
984
+ this.actionButtonClicked = new EventEmitter();
985
+ this.linkClicked = new EventEmitter();
986
+ }
987
+ onActionButtonClicked() {
988
+ this.actionButtonClicked.emit();
989
+ }
990
+ onLinkClicked(event) {
991
+ this.linkClicked.emit(event);
992
+ }
993
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
994
+ 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"] }] }); }
995
+ }
996
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, decorators: [{
997
+ type: Component,
998
+ 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"] }]
999
+ }], propDecorators: { sourceIconClasses: [{
1000
+ type: Input,
1001
+ args: [{ required: true }]
1002
+ }], sourceName: [{
1003
+ type: Input,
1004
+ args: [{ required: true }]
1005
+ }], title: [{
1006
+ type: Input,
1007
+ args: [{ required: true }]
1008
+ }], link: [{
1009
+ type: Input,
1010
+ args: [{ required: false }]
1011
+ }], externalLink: [{
1012
+ type: Input,
1013
+ args: [{ required: false }]
1014
+ }], tooltipContent: [{
1015
+ type: Input,
1016
+ args: [{ required: false }]
1017
+ }], badgeContent: [{
1018
+ type: Input,
1019
+ args: [{ required: false }]
1020
+ }], actionButtonName: [{
1021
+ type: Input,
1022
+ args: [{ required: false }]
1023
+ }], timestamp: [{
1024
+ type: Input,
1025
+ args: [{ required: false }]
1026
+ }], tertiaryInfo: [{
1027
+ type: Input,
1028
+ args: [{ required: false }]
1029
+ }], actionButtonClicked: [{
1030
+ type: Output
1031
+ }], linkClicked: [{
1032
+ type: Output
1033
+ }] } });
1034
+
929
1035
  /**
930
1036
  * The following CSS classes should be used to style this component. The use of the inputs is deprecated.
931
1037
  * - 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
950
1056
  type: Input
951
1057
  }] } });
952
1058
 
1059
+ class StepperComponent extends CdkStepper {
1060
+ // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
1061
+ // Storybook smoke tests for stepper component are failing without this constructor
1062
+ constructor(_dir, _changeDetectorRef, _elementRef) {
1063
+ super(_dir, _changeDetectorRef, _elementRef);
1064
+ this.size = 'normal';
1065
+ }
1066
+ get isSmallVariant() {
1067
+ return this.size === 'small';
1068
+ }
1069
+ isCompleted(index) {
1070
+ return index < this.selectedIndex;
1071
+ }
1072
+ isActiveStep(index) {
1073
+ return index === this.selectedIndex;
1074
+ }
1075
+ 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 }); }
1076
+ 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 }); }
1077
+ }
1078
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, decorators: [{
1079
+ type: Component,
1080
+ 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"] }]
1081
+ }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
1082
+
953
1083
  class TableHeaderComponent {
954
1084
  constructor(elmentRef, changeDetection) {
955
1085
  this.elmentRef = elmentRef;
@@ -1928,136 +2058,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
1928
2058
  }]
1929
2059
  }] });
1930
2060
 
1931
- class BadgeComponent {
1932
- constructor() {
1933
- this.color = 'blue';
1934
- this.calculateColorsDynamically = false;
1935
- this.textColor = '';
1936
- this.backGroundColor = '';
1937
- }
1938
- ngOnInit() {
1939
- if (this.calculateColorsDynamically) {
1940
- this.calculateColorsFromText();
1941
- }
1942
- }
1943
- get colorClass() {
1944
- if (this.calculateColorsDynamically) {
1945
- return '';
1946
- }
1947
- else {
1948
- return `${this.color}`;
1949
- }
1950
- }
1951
- calculateColorsFromText() {
1952
- let hash = 0;
1953
- const contentAsString = String(this.content);
1954
- for (let i = 0; i < contentAsString.length; i++) {
1955
- hash = contentAsString.charCodeAt(i) + ((hash << 5) - hash);
1956
- }
1957
- this.backGroundColor = `hsla(${hash % 360}, 100%, 58%, 0.12)`;
1958
- this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
1959
- }
1960
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1961
- 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"] }] }); }
1962
- }
1963
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
1964
- type: Component,
1965
- 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"] }]
1966
- }], propDecorators: { content: [{
1967
- type: Input,
1968
- args: [{ required: true }]
1969
- }], color: [{
1970
- type: Input
1971
- }], calculateColorsDynamically: [{
1972
- type: Input
1973
- }] } });
1974
-
1975
- class StepperComponent extends CdkStepper {
1976
- // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
1977
- // Storybook smoke tests for stepper component are failing without this constructor
1978
- constructor(_dir, _changeDetectorRef, _elementRef) {
1979
- super(_dir, _changeDetectorRef, _elementRef);
1980
- this.size = 'normal';
1981
- }
1982
- get isSmallVariant() {
1983
- return this.size === 'small';
1984
- }
1985
- isCompleted(index) {
1986
- return index < this.selectedIndex;
1987
- }
1988
- isActiveStep(index) {
1989
- return index === this.selectedIndex;
1990
- }
1991
- 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 }); }
1992
- 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 }); }
1993
- }
1994
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, decorators: [{
1995
- type: Component,
1996
- 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"] }]
1997
- }], ctorParameters: () => [{ type: i1$3.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
1998
-
1999
- class IntegrationLinkCardComponent {
2000
- constructor() {
2001
- this.actionButtonClicked = new EventEmitter();
2002
- this.linkClicked = new EventEmitter();
2003
- }
2004
- onActionButtonClicked() {
2005
- this.actionButtonClicked.emit();
2006
- }
2007
- onLinkClicked(event) {
2008
- this.linkClicked.emit(event);
2009
- }
2010
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2011
- 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"] }] }); }
2012
- }
2013
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardComponent, decorators: [{
2014
- type: Component,
2015
- 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"] }]
2016
- }], propDecorators: { sourceIconClasses: [{
2017
- type: Input,
2018
- args: [{ required: true }]
2019
- }], sourceName: [{
2020
- type: Input,
2021
- args: [{ required: true }]
2022
- }], title: [{
2023
- type: Input,
2024
- args: [{ required: true }]
2025
- }], link: [{
2026
- type: Input,
2027
- args: [{ required: false }]
2028
- }], externalLink: [{
2029
- type: Input,
2030
- args: [{ required: false }]
2031
- }], tooltipContent: [{
2032
- type: Input,
2033
- args: [{ required: false }]
2034
- }], badgeContent: [{
2035
- type: Input,
2036
- args: [{ required: false }]
2037
- }], actionButtonName: [{
2038
- type: Input,
2039
- args: [{ required: false }]
2040
- }], timestamp: [{
2041
- type: Input,
2042
- args: [{ required: false }]
2043
- }], tertiaryInfo: [{
2044
- type: Input,
2045
- args: [{ required: false }]
2046
- }], actionButtonClicked: [{
2047
- type: Output
2048
- }], linkClicked: [{
2049
- type: Output
2050
- }] } });
2051
-
2052
- class IntegrationLinkCardGroupComponent {
2053
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2054
- 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"] }); }
2055
- }
2056
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IntegrationLinkCardGroupComponent, decorators: [{
2057
- type: Component,
2058
- 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"] }]
2059
- }] });
2060
-
2061
2061
  class LxCoreUiModule {
2062
2062
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2063
2063
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: LxCoreUiModule, imports: [i1$2.TranslateModule, AfterViewInitDirective,