@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
50 lines (49 loc) • 1.99 kB
HTML
<a class="nj-link" *ngIf="!routerLink"
[ngClass]="[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]"
[attr.href]="href"
[attr.rel]="rel"
[attr.target]="target"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.title]="title"
[attr.id]="id">
<ng-container [ngTemplateOutlet]="linkContent"></ng-container>
</a>
<a class="nj-link" *ngIf="routerLink"
[ngClass]="[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]"
[routerLink]="routerLink['commands']"
[target]="routerLink.target"
[queryParams]="routerLink.queryParams"
[fragment]="routerLink.fragment"
[queryParamsHandling]="routerLink.queryParamsHandling"
[state]="routerLink.state"
[relativeTo]="routerLink.relativeTo"
[preserveFragment]="routerLink.preserveFragment"
[skipLocationChange]="routerLink.skipLocationChange"
[replaceUrl]="routerLink.replaceUrl"
[attr.rel]="rel"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.title]="title"
[attr.id]="id">
<ng-container [ngTemplateOutlet]="linkContent"></ng-container>
</a>
<ng-template #linkContent>
<ng-content></ng-content>
<ng-container *ngIf="hasIcon">
<nj-icon [name]="icon" *ngIf="icon && !isExternalLink()"></nj-icon>
<ng-container *ngIf="!icon && !isExternalLink()">
<ng-content select="[custom-icon]"></ng-content>
</ng-container>
</ng-container>
<ng-container *ngIf="!icon && isExternalLink()">
<span class="nj-sr-only"> {{externalLabel}}</span>
<!-- Only useful for projects that don't use material icons -->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" aria-hidden="true">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path
d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>
</ng-container>
</ng-template>