|
headline
|
Type : string | null
|
|
|
|
isExpertChannel
|
Type : boolean
|
Default value : false
|
|
|
|
subline
|
Type : string | null
|
|
|
|
topline
|
Type : string | null
|
|
|
Outputs
|
backLinkClick
|
Type : Event
|
|
|
|
hasMargin
|
Type : unknown
|
Default value : !inject(NO_MARGIN)
|
|
|
|
isA1
|
Type : unknown
|
Default value : inject(IS_A1)
|
|
|
|
Readonly
isExpertAppearance
|
Type : unknown
|
Default value : computed(() => this.isExpertChannel() || this.isA1)
|
|
|
|
useEnhancedVerticalSpacing
|
Type : unknown
|
Default value : inject(USE_ENHANCED_VERTICAL_SPACING)
|
|
|
Accessors
|
isLeftAligned
|
getisLeftAligned()
|
|
|
import { BackLinkConfigElement } from '@allianz/taly-core/web-components';
import { IS_A1, NO_MARGIN, USE_ENHANCED_VERTICAL_SPACING } from '@allianz/taly-core';
import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
@Component({
selector: 'frame-stage-view',
templateUrl: 'stage-view.component.html',
styleUrls: ['stage-view.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.is-a1]': 'isA1'
}
})
export class StageViewComponent {
readonly headline = input<string | null>();
readonly topline = input<string | null>();
readonly subline = input<string | null>();
readonly imageStart = input<string>();
readonly imageEnd = input<string>();
readonly imageNarrow = input<string>();
readonly centered = input<boolean>();
readonly isExpertChannel = input(false);
readonly backLinkData = input<BackLinkConfigElement>();
readonly backLinkClick = output<Event>();
useEnhancedVerticalSpacing = inject(USE_ENHANCED_VERTICAL_SPACING);
hasMargin = !inject(NO_MARGIN);
isA1 = inject(IS_A1);
readonly isExpertAppearance = computed(() => this.isExpertChannel() || this.isA1);
get isLeftAligned() {
return this.isA1 || (this.isExpertChannel() && !this.centered());
}
}
<nx-small-stage
[appearance]="isExpertAppearance() ? 'expert' : 'default'"
data-testid="nx-small-stage"
[class]="{
'has-width-restricted-container': isExpertAppearance(),
'is-left-aligned': isLeftAligned
}"
[class.has-margin]="hasMargin"
>
@if (backLinkData()) {
<nx-link nxSmallStageHeader>
<a [href]="backLinkData()?.path" (click)="backLinkClick.emit($event)" data-testid="back-link">
<nx-icon name="arrow-left"></nx-icon>
{{ backLinkData()?.stageLinkLabel }}
</a>
</nx-link>
} @if (imageStart() && !isExpertAppearance()) {
<nx-small-stage-image
nxSmallStageImageStart
[src]="imageStart() ?? '' | talyNormalizeUrl"
data-testid="start-image"
></nx-small-stage-image>
} @if (imageEnd()) {
<nx-small-stage-image
nxSmallStageImageEnd
[src]="imageEnd() ?? '' | talyNormalizeUrl"
data-testid="end-image"
></nx-small-stage-image>
} @if (imageNarrow() && !isExpertAppearance()) {
<nx-small-stage-image
nxSmallStageImageBottom
[src]="imageNarrow() ?? '' | talyNormalizeUrl"
data-testid="narrow-image"
></nx-small-stage-image>
} @if (topline()) { @if (isA1) {
<p nxEyebrow class="topline-helper-margin" data-testid="topline">
{{ topline() ?? undefined | interpolateFromStore | async }}
</p>
} @else {
<p
nxCopytext
class="description-text topline-helper-margin"
[ngClass]="{
'topline-legacy': !useEnhancedVerticalSpacing,
'topline-legacy-expert': !useEnhancedVerticalSpacing && isExpertAppearance()
}"
data-testid="topline"
>
{{ topline() ?? undefined | interpolateFromStore | async }}
</p>
} } @if (headline()) {
<taly-internal-headline type="pageAsStage" data-testid="headline">
{{ headline() ?? undefined | interpolateFromStore | async }}
</taly-internal-headline>
} @if (subline()) { @if (isA1) {
<p class="subline nx-margin-bottom-0 subline-helper-margin" data-testid="subline">
{{ subline() ?? undefined | interpolateFromStore | async }}
</p>
} @else {
<p
[ngClass]="{
'subline-legacy': !useEnhancedVerticalSpacing && !isExpertAppearance(),
'subline-legacy-expert': !useEnhancedVerticalSpacing && isExpertAppearance(),
}"
class="description-text nx-margin-bottom-0 subline-helper-margin"
data-testid="subline"
>
{{ subline() ?? undefined | interpolateFromStore | async }}
</p>
} }
</nx-small-stage>
@use '../../../styles/breakpoints.scss' as *;
:host {
display: block;
}
nx-small-stage.is-left-aligned {
justify-content: start;
}
:host-context(.is-a1) {
@container (min-width: #{$breakpoint-xl}) {
nx-small-stage.is-left-aligned {
justify-content: center;
}
nx-small-stage ::ng-deep .container {
padding: 0;
}
}
}
nx-small-stage.has-width-restricted-container ::ng-deep .container {
.has-margin {
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;
@container (max-width: #{$breakpoint-m}) {
letter-spacing: 0;
}
}
.topline-helper-margin {
margin-bottom: var(--vertical-sub-line-helper);
}
.subline-helper-margin {
margin-top: var(--vertical-sub-line-helper);
}
.topline-legacy {
font-size: 20px;
line-height: 28px;
letter-spacing: 0.2px;
margin-bottom: 16px !important;
@container (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;
@container (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;
}
:host(.is-a1) {
.subline {
font-size: var(--semantic-font-size-body-l);
font-weight: var(--semantic-font-weight-body);
line-height: var(--semantic-line-height-body-l);
letter-spacing: var(--semantic-letter-spacing-body-l);
}
nx-small-stage {
::ng-deep .content {
gap: var(--semantic-gap-all-static-100);
}
}
}
Legend
Html element with directive