File
HostBindings
|
class.is-retail-channel
|
Type : boolean
|
Default value : inject(CHANNEL_TOKEN) === CHANNEL.RETAIL
|
|
|
import { CHANNEL, CHANNEL_TOKEN } from '@allianz/taly-core';
import { FooterConfiguration } from '@allianz/taly-core/schemas';
import { Component, HostBinding, Input, TemplateRef, inject } from '@angular/core';
@Component({
selector: 'frame-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
standalone: false
})
export class FooterComponent {
@Input() footerConfig?: FooterConfiguration;
@Input() footerTemplate?: TemplateRef<FooterConfiguration>;
@HostBinding('class.is-retail-channel')
private isRetailChannel = inject(CHANNEL_TOKEN) === CHANNEL.RETAIL;
}
<ng-container
*ngTemplateOutlet="footerTemplate || defaultFooterTemplate; context: { $implicit: footerConfig }"
>
</ng-container>
<ng-template #defaultFooterTemplate let-data>
<footer nx-footer *aclTag="'taly-frame-footer'" data-testid="footer">
<div class="main-content">
<nx-footer-copyright> {{ data?.copyrightHolder }} </nx-footer-copyright>
<nx-footer-navigation>
<nx-footer-link *ngFor="let link of data?.links" data-testid="nx-footer-link">
<a [routerLink]="link.path" *ngIf="!link.external">{{ link.label }}</a>
<a [attr.href]="link.path" target="_blank" *ngIf="link.external === true">{{
link.label
}}</a>
</nx-footer-link>
</nx-footer-navigation>
</div>
@if (data?.subline) {
<p class="subline nx-font-weight-semibold" nxCopytext="medium">
{{ data?.subline }}
</p>
}
</footer>
</ng-template>
@use '../../../styles/breakpoints.scss' as *;
:host {
display: block;
footer {
flex-direction: column;
}
}
:host(.is-retail-channel) {
.nx-footer__copyright {
font-weight: 600;
}
@media (max-width: $breakpoint-m) {
.nx-footer__navigation .nx-footer__link {
padding-bottom: 24px;
}
.nx-footer__navigation .nx-footer__link:last-of-type {
padding-bottom: 64px;
}
}
}
:host-context(.is-stacked) {
footer {
border-top: 1px solid var(--header-border-color);
}
}
.main-content {
display: flex;
flex-direction: row;
}
.subline {
margin-top: 8px;
margin-bottom: 0px;
}
@media (max-width: $breakpoint-m) {
.main-content {
flex-direction: column-reverse;
}
.subline {
text-align: center;
margin-top: 24px;
}
}
Legend
Html element with directive