|
subline
|
Type : string | null
|
|
|
HostBindings
|
class.is-a1
|
Type : any
|
Default value : inject(IS_A1)
|
|
|
|
class.is-new-vertical-spacing
|
Type : any
|
Default value : inject(USE_ENHANCED_VERTICAL_SPACING)
|
|
|
import { CHANNEL_TOKEN, IS_A1, USE_ENHANCED_VERTICAL_SPACING } from '@allianz/taly-core';
import { CommonModule } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
HostBinding,
inject,
input,
Input
} from '@angular/core';
import { NxHeadlineModule, type NxHeadlineSize } from '@allianz/ng-aquila/headline';
@Component({
selector: 'taly-internal-headline',
templateUrl: './internal-headline.component.html',
styleUrl: './internal-headline.component.scss',
imports: [CommonModule, NxHeadlineModule],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TalyInternalHeadlineComponent {
@Input({ required: true }) type!: 'pageAsStage' | 'page' | 'section' | 'subsection';
subline = input<string | null>();
@HostBinding('class.is-retail') get isRetail() {
return this.channel === 'retail';
}
@HostBinding('class.is-a1')
protected isA1 = inject(IS_A1);
@HostBinding('class.is-new-vertical-spacing')
protected useEnhancedVerticalSpacing = inject(USE_ENHANCED_VERTICAL_SPACING);
protected channel = inject(CHANNEL_TOKEN);
protected pageAsStageHeadlineSize: NxHeadlineSize = '3xl';
protected pageHeadlineSize: NxHeadlineSize = '3xl';
protected sectionHeadlineSize: NxHeadlineSize = '2xl';
protected subsectionHeadlineSize: NxHeadlineSize = 'xl';
protected sublineSize: NxHeadlineSize = 's';
}
@switch (type) { @case ('pageAsStage') {
<h1
nxHeadline
[size]="pageAsStageHeadlineSize"
[ngClass]="{
'nx-font-weight-regular': channel === 'expert'
}"
class="js-stage-headline stage-headline"
tabindex="-1"
data-testid="pageAsStageHeadlineInternal"
>
<ng-container *ngTemplateOutlet="content"></ng-container>
</h1>
} @case ('page') {
<div class="page-headline-container js-page-headline" tabindex="-1">
<h1 nxHeadline [size]="pageHeadlineSize" data-testid="pageHeadlineInternal">
<ng-container *ngTemplateOutlet="content"></ng-container>
</h1>
@if (subline()) {
<p nxHeadline [size]="sublineSize" class="subline" data-testid="pageHeadlineSublineInternal">
{{ subline() }}
</p>
}
</div>
} @case ('section') {
<h2
nxHeadline
[size]="sectionHeadlineSize"
class="section-headline"
data-testid="sectionHeadlineInternal"
>
<ng-container *ngTemplateOutlet="content"></ng-container>
</h2>
} @case ('subsection') {
<h3
nxHeadline
[size]="subsectionHeadlineSize"
class="subsection-headline"
data-testid="subsectionHeadlineInternal"
>
<ng-container *ngTemplateOutlet="content"></ng-container>
</h3>
} }
<ng-template #content><ng-content></ng-content></ng-template>
/* This can be removed, when compatibility.css is not used anymore */
.nx-heading--section,
.nx-heading--subsection-medium {
margin-bottom: 0px;
}
:host {
--heading-06-font-weight: 400;
--heading-06-mobile-font-weight: 400;
}
:host(.is-retail):not(.is-a1) {
text-align: center;
}
:host(.is-retail) {
// NDBX Headline
--heading-01-font-size: 40px;
--heading-01-line-height: 48px;
--heading-01-mobile-font-size: 35px;
--heading-01-mobile-line-height: 40px;
--heading-02-font-size: 30px;
--heading-02-line-height: 36px;
--heading-02-mobile-font-size: 26px;
--heading-02-mobile-line-height: 32px;
--heading-03-font-size: 20px;
--heading-03-line-height: 28px;
--heading-03-font-weight: 600;
--heading-03-letter-spacing: 0.2px;
--heading-03-mobile-line-height: 28px;
--heading-03-mobile-font-weight: 600;
--heading-03-mobile-letter-spacing: 0.2px;
--heading-06-font-size: 20px;
--heading-06-line-height: 28px;
--heading-06-mobile-font-size: 16px;
--heading-06-mobile-line-height: 24px;
}
:host(.is-retail.is-new-vertical-spacing) {
--heading-03-mobile-font-size: 20px;
--heading-06-font-weight: 300;
--heading-06-mobile-font-weight: 300;
--heading-06-mobile-font-size: 18px;
--heading-06-mobile-line-height: 28px;
}
:host(.is-retail):not(.is-new-vertical-spacing) {
--heading-01-font-size: 54px;
--heading-01-line-height: 60px;
--heading-02-font-size: 40px;
--heading-02-line-height: 48px;
--heading-03-font-size: 24px;
--heading-03-line-height: 32px;
--heading-03-mobile-font-size: 20px;
}
:host:not(.is-retail) {
// NDBX Headline
--heading-01-font-size: 30px;
--heading-01-line-height: 36px;
--heading-01-font-weight: 600;
--heading-02-font-size: 24px;
--heading-02-line-height: 32px;
--heading-02-font-weight: 600;
--heading-02-letter-spacing: 0.2px;
--heading-03-font-size: 20px;
--heading-03-line-height: 28px;
--heading-03-font-weight: 600;
--heading-03-letter-spacing: 0.2px;
--heading-04-font-weight: 600;
--heading-06-font-size: 16px;
--heading-06-line-height: 24px;
--heading-06-mobile-font-size: 16px;
--heading-06-mobile-line-height: 24px;
}
:host:not(.is-retail):not(.is-new-vertical-spacing) {
--heading-01-font-size: 40px;
--heading-01-line-height: 48px;
--heading-01-font-weight: 400;
--heading-01-letter-spacing: 0.3px;
--heading-02-font-size: 26px;
--heading-02-line-height: 32px;
--heading-02-letter-spacing: 0.3px;
}
.page-headline-container {
padding-bottom: var(--vertical-helper-high-spacing);
}
:host(.is-new-vertical-spacing) .page-headline-container {
padding-bottom: var(--vertical-headline-helper);
}
.subline {
margin-top: var(--vertical-helper-low-spacing);
}
:host(.is-retail) .subline {
@container (max-width: 704px) {
margin-top: 16px;
}
}
.section-headline {
margin-bottom: var(--vertical-helper-headline-spacing);
}
:host(.is-new-vertical-spacing) .section-headline {
margin-bottom: var(--vertical-section-inner);
}
.subsection-headline {
margin-bottom: var(--vertical-inner-section-spacing);
}
.stage-headline:focus,
.page-headline-container:focus {
outline: none;
}
Legend
Html element with directive