File
Index
Inputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
HostBindings
|
class.is-new-vertical-spacing
|
Type : any
|
Default value : inject(USE_NEW_VERTICAL_SPACING)
|
|
|
import { CHANNEL_TOKEN, USE_NEW_VERTICAL_SPACING } from '@allianz/taly-core';
import { CommonModule } from '@angular/common';
import { Component, HostBinding, Input, inject } from '@angular/core';
import { NxHeadlineModule, type NxHeadlineSize } from '@aposin/ng-aquila/headline';
@Component({
selector: 'taly-internal-headline',
templateUrl: './internal-headline.component.html',
styleUrl: './internal-headline.component.scss',
imports: [CommonModule, NxHeadlineModule]
})
export class TalyInternalHeadlineComponent {
@Input({ required: true }) type!: 'page' | 'pageAsStage' | 'section' | 'subsection';
@HostBinding('class.is-retail') get isRetail() {
return this.channel === 'retail';
}
@HostBinding('class.is-new-vertical-spacing')
private useNewVerticalSpacing = inject(USE_NEW_VERTICAL_SPACING);
protected channel = inject(CHANNEL_TOKEN);
protected pageAsStageHeadlineSize: NxHeadlineSize = '3xl';
protected pageHeadlineSize: NxHeadlineSize = '3xl';
protected sectionHeadlineSize: NxHeadlineSize = '2xl';
protected subsectionHeadlineSize: NxHeadlineSize = 'xl';
}
@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') {
<h1 nxHeadline [size]="pageHeadlineSize" data-testid="pageHeadlineInternal">
<ng-container *ngTemplateOutlet="content"></ng-container>
</h1>
} @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>
Legend
Html element with directive