@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.
- package/esm2022/lib/core-ui/components/badge/badge.component.mjs +2 -2
- package/esm2022/lib/core-ui/components/ellipsis/ellipsis.component.mjs +2 -2
- package/esm2022/lib/core-ui/components/empty-state/empty-state.component.mjs +2 -2
- package/esm2022/lib/core-ui/components/stepper/stepper.component.mjs +3 -3
- package/esm2022/lib/core-ui/core-ui.module.mjs +6 -6
- package/esm2022/lib/core-ui/directives/autoclose.directive.mjs +2 -2
- package/esm2022/lib/core-ui/tooltip/tooltip.directive.mjs +1 -1
- package/esm2022/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/components/currency/currency-input.component.mjs +3 -3
- package/esm2022/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.mjs +1 -1
- package/esm2022/lib/forms-ui/components/keyboard-select.directive.mjs +2 -2
- package/esm2022/lib/forms-ui/components/multi-select/multi-select-selection/multi-select-selection.component.mjs +2 -2
- package/esm2022/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/components/picker/picker-trigger.directive.mjs +2 -2
- package/esm2022/lib/forms-ui/components/pill-list/pill-list.component.mjs +1 -1
- package/esm2022/lib/forms-ui/directives/form-error.directive.mjs +1 -1
- package/esm2022/lib/forms-ui/directives/form-submit.directive.mjs +1 -1
- package/esm2022/lib/forms-ui/directives/max-length-counter.directive.mjs +2 -3
- package/esm2022/lib/forms-ui/validators/string-not-in-array.validator.mjs +1 -1
- package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +2 -2
- package/fesm2022/leanix-components.mjs +147 -147
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/stepper/stepper.component.d.ts +2 -2
- package/lib/forms-ui/directives/max-length-counter.directive.d.ts +1 -1
- 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 {
|
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
|
54
|
+
class BadgeComponent {
|
55
55
|
constructor() {
|
56
|
-
this.
|
57
|
-
this.
|
56
|
+
this.color = 'blue';
|
57
|
+
this.calculateColorsDynamically = false;
|
58
|
+
this.textColor = '';
|
59
|
+
this.backGroundColor = '';
|
58
60
|
}
|
59
|
-
|
60
|
-
|
61
|
+
ngOnInit() {
|
62
|
+
if (this.calculateColorsDynamically) {
|
63
|
+
this.calculateColorsFromText();
|
64
|
+
}
|
61
65
|
}
|
62
|
-
|
63
|
-
|
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:
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
66
87
|
type: Component,
|
67
|
-
args: [{ selector: 'lx-
|
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
|
-
|
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,
|