Description
The NavButtonsContainerComponent is a two buttons component for NEXT and BACK navigation options.
Example
|
nxBackAction
|
Type : () => void
|
Default value : () => undefined
|
|
|
|
nxBackHidden
|
Type : boolean
|
Default value : false
|
|
|
|
nxBackLink
|
Type : boolean
|
Default value : false
|
|
|
|
nxDisableBack
|
Type : boolean
|
Default value : false
|
|
|
|
nxDisableNext
|
Type : boolean
|
Default value : false
|
|
|
|
nxEnableNextOptionalLabel
|
Type : boolean
|
Default value : false
|
|
|
|
nxNextAction
|
Type : () => void
|
Default value : () => undefined
|
|
|
|
nxNextHidden
|
Type : boolean
|
Default value : false
|
|
|
|
nxNextLink
|
Type : boolean
|
Default value : false
|
|
|
|
nxNextOptionalLabel
|
Type : string
|
|
|
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
/**
* The NavButtonsContainerComponent is a two buttons component for NEXT and BACK navigation options.
*
* @param nxNextType: Button type for NEXT Button
* @param nxBackType: Button type for BACK Button
* @param nxNextLabel: Translation key to be replaced with the NEXT button label
* @param nxBackLabel: Translation key to be replaced with the BACK button label
* @param nxNextHidden: Flag to show/hide NEXT button
* @param nxBackHidden: Flag to show/hide BACK button
* @param nxNextAction: Function to be executed when NEXT button is clicked
* @param nxBackAction: Function to be executed when BACK button is clicked
* @param nxDisableNext: Flag to disable NEXT button
* @param nxDisableBack: Flag to disable BACK button
* @param nxNextOptionalLabel: Translation key to be replaced with the NEXT button optional label
* @param nxEnableNextOptionalLabel: Flag to enable NEXT button optional label
* @param nxBackLink: Flag to show BACK button as link instead of button
* @param nxNextLink: Flag to show NEXT button as link instead of button
*/
@Component({
selector: 'pfe-nav-buttons-container',
templateUrl: 'nav-buttons-container.component.html',
styleUrls: ['nav-buttons-container.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PfeNavButtonsContainerComponent {
readonly nxNextType = input<string>();
readonly nxBackType = input<string>();
readonly nxBackLabel = input<string>();
readonly nxNextLabel = input<string>();
readonly nxNextHidden = input(false);
readonly nxBackHidden = input(false);
readonly nxDisableNext = input(false);
readonly nxDisableBack = input(false);
readonly nxNextOptionalLabel = input<string>();
readonly nxEnableNextOptionalLabel = input(false);
readonly nxBackLink = input(false);
readonly nxNextLink = input(false);
readonly nxNextAction = input<() => void>(() => undefined);
readonly nxBackAction = input<() => void>(() => undefined);
}
<div nxLayout="grid nopadding">
@if (!(nxBackHidden() && nxNextHidden())) {
<div nxRow rowJustify="center,center,center,center" class="nav-buttons-container">
@if (!nxNextHidden() && !nxNextLink()) {
<div nxCol="12,12,6,6" class="next-button">
<div nxRow rowJustify="center,center,center,center" [ngClass]="{ twoButtons: !nxNextHidden() && !nxBackHidden() }">
<div nxCol="10,10,10,8">
<button [nxButton]="nxNextType()" [disabled]="nxDisableNext()" (click)="nxNextAction()()">
{{ (nxEnableNextOptionalLabel() ? nxNextOptionalLabel() : nxNextLabel()) | pfeTranslate }}
</button>
</div>
</div>
</div>
}
@if (!nxNextHidden() && nxNextLink()) {
<div nxCol="12" class="link">
<div nxRow rowJustify="center,center,center,center">
<nx-link nxStyle="block">
<a
[attr.tabindex]="nxDisableNext() ? -1 : 0"
[attr.aria-disabled]="nxDisableNext() ? true : null"
(click)="!nxDisableNext() ? nxNextAction()() : false"
(keydown.enter)="!nxDisableNext && nxNextAction()"
(keydown.space)="!nxDisableNext && nxNextAction(); $event.preventDefault()"
>
{{ nxNextLabel() | pfeTranslate }}<span aria-hidden="true" class="nx-link__icon right c-icon c-icon--arrow-right"></span>
</a>
</nx-link>
</div>
</div>
}
@if (!nxBackHidden() && !nxBackLink()) {
<div nxCol="12,12,6,6" class="back-button">
<div nxRow rowJustify="center,center,center,center" [ngClass]="{ twoButtons: !nxNextHidden() && !nxBackHidden() }">
<div nxCol="10,10,10,8">
<button [nxButton]="nxBackType()" [disabled]="nxDisableBack()" (click)="nxBackAction()()">
{{ nxBackLabel() | pfeTranslate }}
</button>
</div>
</div>
</div>
}
@if (!nxBackHidden() && nxBackLink()) {
<div nxCol="12" class="link">
<div nxRow rowJustify="center,center,center,center">
<nx-link nxStyle="block">
<a
[attr.tabindex]="nxDisableBack() ? -1 : 0"
[attr.aria-disabled]="nxDisableBack() ? true : null"
(click)="!nxDisableBack() ? nxBackAction()() : false"
(keydown.enter)="!nxDisableBack && nxBackAction()"
(keydown.space)="!nxDisableBack && nxBackAction(); $event.preventDefault()"
>
<span aria-hidden="true" class="nx-link__icon c-icon c-icon--arrow-left"></span>{{ nxBackLabel() | pfeTranslate }}
</a>
</nx-link>
</div>
</div>
}
</div>
}
</div>
@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;
.nav-buttons-container {
.next-button {
@include tablet {
order: 1;
}
.twoButtons {
@include tablet {
justify-content: flex-start !important;
}
}
}
.back-button .twoButtons {
@include tablet {
justify-content: flex-end !important;
}
}
.nx-link__icon.right {
float: right;
}
& > .link:not(:last-child) {
margin-bottom: $space-l;
}
button {
width: 100%;
margin: 0 0 24px;
}
}
Legend
Html element with directive