File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
debugToolsToggleVisible
|
Type : boolean
|
Default value : true
|
|
|
Methods
|
enterPresentationMode
|
enterPresentationMode()
|
|
|
|
|
|
toggleJourneyInsights
|
toggleJourneyInsights(value?: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
boolean
|
Yes
|
|
|
hasLocaleWarning
|
Default value : false
|
|
|
|
journeyInsightsExpanded
|
Default value : false
|
|
|
|
presentationMode
|
Default value : false
|
|
|
import { DebugToolsService } from '@allianz/taly-core/runtime-utils';
import { JourneyInsights } from '@allianz/taly-core/showroom';
import { Component, Input, OnInit, inject, LOCALE_ID } from '@angular/core';
@Component({
selector: 'taly-showroom-header',
templateUrl: './showroom-header.component.html',
styleUrls: ['./showroom-header.component.scss'],
standalone: false
})
export class ShowroomHeaderComponent implements OnInit {
@Input() journeyInsights!: JourneyInsights;
@Input() debugToolsToggleVisible = true;
journeyInsightsExpanded = false;
presentationMode = false;
hasLocaleWarning = false;
protected debugToolsService = inject(DebugToolsService);
private currentLocale = inject(LOCALE_ID);
private readonly defaultLocale = 'en-US';
ngOnInit() {
const url = new URL(window.location.href);
const searchParams = url.searchParams;
if (searchParams.get('presentation') === 'true') {
this.presentationMode = true;
this.toggleJourneyInsights(false);
this.debugToolsService.debugToolsVisible.set(false);
}
this.hasLocaleWarning = this.currentLocale !== this.defaultLocale;
}
toggleJourneyInsights(value?: boolean) {
this.journeyInsightsExpanded = value ?? !this.journeyInsightsExpanded;
}
enterPresentationMode() {
// For the HashOnlyLocationStrategy to preserve a query param
// we need to add it _before_ the hash. The Angular Router doesn't
// support this out of the box, so we need to do it manually.
const presentationUrl = new URL(window.location.href);
if (presentationUrl.searchParams.get('presentation') !== 'true') {
presentationUrl.searchParams.set('presentation', 'true');
window.location.replace(presentationUrl.href);
}
}
}
<nx-message-banner
*ngIf="hasLocaleWarning"
class="nx-margin-0"
context="warning"
closeButtonLabel="close non-english warning message banner button"
(close)="hasLocaleWarning = false"
data-testid="non-english-warning-banner"
>
This showroom is running in a non-english locale, which might lead to invalid example data being
used
</nx-message-banner>
<header nx-header data-testid="header" *ngIf="!presentationMode">
<nx-header-brand class="nx-margin-right-5xl">
<nx-link>
<a href="#">
<figure nxFigure>
<img
data-testid="logo"
height="32"
width="32"
[src]="'assets/logos/showroom_logo.svg' | talyNormalizeUrl"
i18n-alt="@@showroom-header.brand-logo.alt"
alt="Allianz Global Brand Logo"
role="none"
class="logo-image"
/>
</figure>
</a>
</nx-link>
<nx-header-app-title data-testid="nx-header-app-title" i18n>
Building Block Platform Showroom
</nx-header-app-title>
</nx-header-brand>
<nx-header-actions class="header-action">
@if (debugToolsToggleVisible) {
<nx-switcher
[checked]="debugToolsService.debugToolsVisible()"
(checkedChange)="debugToolsService.debugToolsVisible.set($event)"
labelSize="small"
class="nx-margin-right-m"
data-testid="dev-tools-switcher"
>Dev Tools
</nx-switcher>
}
<button
nxPlainButton
(click)="toggleJourneyInsights()"
class="nx-margin-right-m"
data-testid="journey-insights-button"
>
Journey Details
<nx-icon
[name]="journeyInsightsExpanded ? 'chevron-up' : 'chevron-down'"
aria-label="Journey Insights"
nxIconPositionEnd
></nx-icon>
</button>
<button nxPlainButton (click)="enterPresentationMode()" data-testid="present-button">
<nx-icon name="play" aria-label="present" nxIconPositionEnd></nx-icon>
Present
</button>
</nx-header-actions>
</header>
<div *ngIf="journeyInsightsExpanded">
<taly-journey-insights
[journeyInsights]="journeyInsights"
(closePanel)="toggleJourneyInsights()"
data-testid="journey-insights"
>
</taly-journey-insights>
</div>
header {
--text-01: #fbf9f9;
--header-border-color: #585459;
--header-background-color: #151c30;
--azlogo-filter: brightness(0) invert(1);
--plain-button-color: var(--text-01);
--plain-button-hover-color: var(--hover-primary);
--plain-button-active-color: var(--active-primary);
--hover-primary: #ececec;
--active-primary: #ececec;
color: var(--text-01);
overflow-x: auto;
}
.logo-image {
display: block;
filter: var(--azlogo-filter);
}
Legend
Html element with directive