libs/core/frame/src/frame-parts/taly-footnote/taly-footnote.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | taly-footnote |
| standalone | true |
| imports | |
| styleUrls | ./taly-footnote.component.scss |
| templateUrl | ./taly-footnote.component.html |
No results matching.
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, input, OnInit } from '@angular/core';
import { NxCopytextModule } from '@allianz/ng-aquila/copytext';
import { TalyFootnoteService } from './taly-footnote.service';
import { TalyFrameSmallPrintModule } from '../../core/small-print-marker/small-print-marker.module';
@Component({
imports: [CommonModule, TalyFrameSmallPrintModule, NxCopytextModule],
selector: 'taly-footnote',
templateUrl: './taly-footnote.component.html',
styleUrls: ['./taly-footnote.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TalyFootnoteComponent implements OnInit {
footnoteId = input<string>();
hideIndex = input<boolean>();
protected index?: number;
private footnoteService = inject(TalyFootnoteService);
ngOnInit(): void {
// notes with hidden index get pushed to the top of the list
this.index = this.hideIndex() ? 0 : this.footnoteService.getNextIndex(this.footnoteId());
}
}
@if (!hideIndex()) {
<span class="index" [attr.data-index]="index" data-testid="index"></span>
}
<ng-container *talyFrameSmallPrint="index!">
<div
[ngClass]="{ footnote: !hideIndex() }"
class="nx-margin-bottom-s"
nxCopytext
[attr.data-index]="index"
>
<ng-content></ng-content>
</div>
</ng-container>
./taly-footnote.component.scss
.index::after,
.footnote::before {
content: attr(data-index);
vertical-align: super;
font-size: smaller;
}
.index::after {
padding-left: 4px;
}
.footnote::before {
padding-right: 4px;
}