File
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
pageDetails
|
Type : PageDetail[]
|
|
|
import { JourneyInsights } from '@allianz/taly-core/showroom';
import { Component, EventEmitter, Input, Output } from '@angular/core';
interface PageDetail {
pageId: string;
bbTitles: string[];
}
@Component({
selector: 'taly-journey-insights',
templateUrl: 'insights.component.html',
styleUrls: ['insights.component.scss'],
standalone: false
})
export class JourneyInsightsComponent {
@Input() set journeyInsights(value: JourneyInsights) {
this.pageDetails = value.pageDetails;
this.uniqueBbCount = value.uniqueBbs.length;
}
@Output() closePanel = new EventEmitter();
pageDetails!: PageDetail[];
uniqueBbCount!: number;
}
<div class="insights-panel">
<div class="header">
<h3 nxHeadline size="s" class="nx-font-weight-semibold nx-margin-0 headline">
<nx-icon class="nx-margin-right-2xs" name="product-light-bulb-idea" size="s"></nx-icon>
Journey Details
</h3>
<button nxPlainButton type="button" (click)="closePanel.emit()" data-testid="close-button">
<nx-icon size="s" name="close" title="close insights panel"></nx-icon>
</button>
</div>
<div class="nx-margin-bottom-m nx-margin-left-m">
<div nxRow>
<div nxCol="4" class="nx-margin-right-l">
<p nxCopytext class="nx-font-weight-bold nx-margin-top-m nx-margin-bottom-xs">
Page Details
</p>
<taly-page-hierarchy [pageDetails]="pageDetails"></taly-page-hierarchy>
</div>
<div nxCol="5">
<p nxCopytext class="nx-font-weight-bold nx-margin-top-m nx-margin-bottom-xs">
Unique Building Blocks: {{ uniqueBbCount }}
</p>
<a
nxPlainButton
[href]="'/journey.model.json' | talyNormalizeUrl"
class="nx-margin-right-m"
data-testid="show-journey-model"
target="_blank"
rel="noopener"
i18n
>
<nx-icon name="file" nxIconPositionStart></nx-icon>
Show Journey Model (OpenAPI JSON)
</a>
</div>
</div>
</div>
</div>
$insights-color-dark: #202840;
:host {
--headline-color: #ffffff;
--plain-button-color: #ffffff;
--plain-button-hover-color: #ffffff;
--plain-button-active-color: #ffffff;
display: block;
width: 100%;
}
.insights-panel {
background-color: $insights-color-dark;
padding: 24px 32px 40px 32px;
color: #fff;
overflow: auto;
// z-index of cdk-overlay-pane (used by ACL debugger panels) is set to 1000
// Insight panel should be above that
z-index: 1001;
position: absolute;
width: 100%;
}
.header {
display: flex;
justify-content: space-between;
}
.headline {
display: flex;
}
Legend
Html element with directive