File
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
headline
|
Type : string | null
|
|
|
|
isExpertAppearance
|
Type : boolean
|
Default value : false
|
|
|
|
subline
|
Type : string | null
|
|
|
|
topline
|
Type : string | null
|
|
|
|
useNewVerticalSpacing
|
Default value : inject(USE_NEW_VERTICAL_SPACING)
|
|
|
import { BackLinkConfigElement } from '@allianz/taly-common/web-components';
import { USE_NEW_VERTICAL_SPACING } from '@allianz/taly-core';
import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
@Component({
selector: 'frame-stage-view',
templateUrl: 'stage-view.component.html',
styleUrls: ['stage-view.component.scss'],
standalone: false
})
export class StageViewComponent {
@Input() headline?: string | null;
@Input() topline?: string | null;
@Input() subline?: string | null;
@Input() imageStart?: string;
@Input() imageEnd?: string;
@Input() imageNarrow?: string;
@Input() centered?: boolean;
@Input() isExpertAppearance = false;
@Input() backLinkData: BackLinkConfigElement | undefined;
@Output() backLinkClick = new EventEmitter<Event>();
useNewVerticalSpacing = inject(USE_NEW_VERTICAL_SPACING);
}
<nx-small-stage
[appearance]="isExpertAppearance ? 'expert' : 'default'"
data-testid="nx-small-stage"
[class]="{
'has-width-restricted-container': isExpertAppearance,
'is-left-aligned': isExpertAppearance && !centered
}"
>
<nx-link nxSmallStageHeader *ngIf="backLinkData">
<a [href]="backLinkData.path" (click)="backLinkClick.emit($event)" data-testid="back-link">
<nx-icon name="arrow-left"></nx-icon>
{{ backLinkData.stageLinkLabel }}
</a>
</nx-link>
<nx-small-stage-image
nxSmallStageImageStart
[src]="imageStart | talyNormalizeUrl"
*ngIf="imageStart && !isExpertAppearance"
data-testid="start-image"
></nx-small-stage-image>
<nx-small-stage-image
nxSmallStageImageEnd
[src]="imageEnd | talyNormalizeUrl"
*ngIf="imageEnd"
data-testid="end-image"
></nx-small-stage-image>
<nx-small-stage-image
nxSmallStageImageBottom
[src]="imageNarrow | talyNormalizeUrl"
*ngIf="imageNarrow && !isExpertAppearance"
data-testid="narrow-image"
></nx-small-stage-image>
<p
nxCopytext
class="description-text"
style="margin-bottom: var(--vertical-sub-line-helper)"
[ngClass]="{
'topline-legacy': !useNewVerticalSpacing,
'topline-legacy-expert': !useNewVerticalSpacing && isExpertAppearance
}"
data-testid="topline"
*ngIf="topline"
>
{{ topline | interpolateFromStore | async }}
</p>
<taly-internal-headline type="pageAsStage" data-testid="headline" *ngIf="headline">
{{ headline | interpolateFromStore | async }}
</taly-internal-headline>
<p
[ngClass]="{
'subline-legacy': !useNewVerticalSpacing && !isExpertAppearance,
'subline-legacy-expert': !useNewVerticalSpacing && isExpertAppearance,
}"
class="description-text nx-margin-bottom-0"
style="margin-top: var(--vertical-sub-line-helper)"
data-testid="subline"
*ngIf="subline"
>
{{ subline | interpolateFromStore | async }}
</p>
</nx-small-stage>
@use '../../../styles/breakpoints.scss' as *;
:host {
display: block;
}
nx-small-stage.is-left-aligned {
justify-content: start;
}
nx-small-stage.has-width-restricted-container ::ng-deep .container {
max-width: var(--grid-max-width);
}
.description-text {
font-size: var(--stage-copy-text-font-size);
font-weight: 400;
letter-spacing: 0.2px;
line-height: 24px;
@media (max-width: $breakpoint-m) {
letter-spacing: 0;
}
}
.topline-legacy {
font-size: 20px;
line-height: 28px;
letter-spacing: 0.2px;
margin-bottom: 16px !important;
@media (max-width: $breakpoint-m) {
font-size: 16px;
line-height: 24px;
}
}
.subline-legacy {
font-size: 20px;
line-height: 28px;
letter-spacing: 0.2px;
margin-top: 16px !important;
@media (max-width: $breakpoint-m) {
font-size: 16px;
line-height: 24px;
}
}
.topline-legacy-expert {
line-height: 24px;
font-size: 16px;
margin-bottom: 8px !important;
}
.subline-legacy-expert {
line-height: 24px;
font-size: 16px;
margin-top: 8px !important;
}
Legend
Html element with directive