TALY - The Allianz Library
  1. Components
  2. TalyInternalHeadlineComponent
libs/core/ui/src/internal-headline/internal-headline.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector taly-internal-headline
standalone true
imports
styleUrls ./internal-headline.component.scss
templateUrl ./internal-headline.component.html
styleUrl ./internal-headline.component.scss

Relationships

Used by

Depends on

Index

Inputs
HostBindings
Accessors

Constructor

constructor()
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:42

Inputs

subline
Type : string | null
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:24
topline
Type : string | null
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:25
type
Type : "pageAsStage" | "page" | "section" | "subsection"
Required :  true
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:23

HostBindings

class.has-margin
Type : boolean
Default value : !(inject(NO_MARGIN, { optional: true }) ?? false)
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:32
class.is-a1
Type : any
Default value : inject(IS_A1)
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:30
class.is-new-vertical-spacing
Type : any
Default value : inject(USE_ENHANCED_VERTICAL_SPACING)
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:34
class.is-retail
Type : boolean
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:26

Accessors

isRetail
getisRetail()
Defined in libs/core/ui/src/internal-headline/internal-headline.component.ts:26
 
import { CHANNEL_TOKEN, IS_A1, NO_MARGIN, USE_ENHANCED_VERTICAL_SPACING } from '@allianz/taly-core';
import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  effect,
  HostBinding,
  inject,
  input
} from '@angular/core';
import { NxHeadlineModule, type NxHeadlineSize } from '@allianz/ng-aquila/headline';
import { NxEyebrowModule } from '@allianz/ng-aquila/eyebrow';
import { NxCopytextModule } from '@allianz/ng-aquila/copytext';

@Component({
  selector: 'taly-internal-headline',
  templateUrl: './internal-headline.component.html',
  styleUrl: './internal-headline.component.scss',
  imports: [CommonModule, NxHeadlineModule, NxEyebrowModule, NxCopytextModule],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TalyInternalHeadlineComponent {
  readonly type = input.required<'pageAsStage' | 'page' | 'section' | 'subsection'>();
  readonly subline = input<string | null>();
  readonly topline = input<string | null>();
  @HostBinding('class.is-retail') get isRetail() {
    return this.channel === 'retail';
  }
  @HostBinding('class.is-a1')
  protected isA1 = inject(IS_A1);
  @HostBinding('class.has-margin')
  protected hasMargin = !(inject(NO_MARGIN, { optional: true }) ?? false);
  @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';

  constructor() {
    effect(() => {
      if (this.type() === 'page' && this.topline() && !this.isA1) {
        console.warn('"topline" is being ignored as it is only allowed when using the A1 theme.');
      }
    });
  }
}

@switch (type()) { @case ('pageAsStage') {
<h1
  nxHeadline
  [size]="pageAsStageHeadlineSize"
  [ngClass]="{
    'nx-font-weight-regular': !isA1 && 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">
  @if (topline() && isA1) {
  <p nxEyebrow class="topline" data-testid="topline">
    {{ topline() }}
  </p>
  }
  <h1 nxHeadline [size]="pageHeadlineSize" data-testid="pageHeadlineInternal">
    <ng-container *ngTemplateOutlet="content"></ng-container>
  </h1>
  @if (subline()) { @if (isA1) {
  <p nxCopytext class="subline" data-testid="pageHeadlineSublineInternal">
    {{ subline() }}
  </p>
  } @else {
  <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>

./internal-headline.component.scss 

/* This can be removed, when compatibility.css is not used anymore */
.nx-heading--section,
.nx-heading--subsection-medium {
  margin-bottom: 0px;
}

:host:not(.is-a1) {
  --heading-06-font-weight: 400;
  --heading-06-mobile-font-weight: 400;

  &.is-retail {
    text-align: center;

    --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;

    &: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;
    }

    &.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;
    }
  }

  &:not(.is-retail) {
    --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;

    &: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;
    }
  }
}

:host(.is-a1) {
  .subline {
    font-size: var(--semantic-font-size-body-l);
    line-height: var(--semantic-line-height-body-l);
    letter-spacing: var(--semantic-letter-spacing-body-l);
  }
}

:host(.is-a1.has-margin) {
  .page-headline-container {
    max-width: 100%;
    width: var(--grid-max-width);
    margin-inline: auto;
  }
}

.page-headline-container {
  padding-bottom: var(--vertical-helper-high-spacing);
}

:host(.is-new-vertical-spacing) .page-headline-container {
  padding-bottom: var(--vertical-headline-helper);
}

.topline {
  margin-bottom: var(--semantic-gap-all-linear-responsive-300);
}

.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
Component
Html element with directive

results matching ""

    No results matching ""