File
|
protocol
|
Type : "tel" | "mailto"
|
|
|
|
rxap-link-cell
|
Type : any
|
|
|
|
short
|
Type : boolean
|
Default value : true
|
|
|
import {
ChangeDetectionStrategy,
Component,
Input,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import {
NgIf,
NgSwitch,
NgSwitchCase,
NgSwitchDefault,
} from '@angular/common';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'td[rxap-link-cell]',
templateUrl: './link-cell.component.html',
styleUrls: ['./link-cell.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, MatTooltipModule, NgSwitch, NgSwitchCase, MatIconModule, NgSwitchDefault]
})
export class LinkCellComponent {
@Input('rxap-link-cell')
public value: any;
public get href(): string {
if (this.protocol) {
return [ this.protocol, this.value ].join(':');
}
return this.value;
}
@Input()
public protocol?: 'tel' | 'mailto';
@Input()
public short = true;
}
<a *ngIf="value" [href]="href" [matTooltip]="value" class="link" target="_blank">
<span class="flex flex-row items-center gap-2">
<span *ngIf="short" class="content grow-0" i18n>Open</span>
<ng-container [ngSwitch]="protocol">
<mat-icon *ngSwitchCase="'tel'" class="grow-0">call</mat-icon>
<mat-icon *ngSwitchCase="'mailto'" class="grow-0">email</mat-icon>
<mat-icon *ngSwitchDefault class="grow-0">launch</mat-icon>
</ng-container>
<span *ngIf="!short" class="content grow-0">{{value}}</span>
</span>
</a>
<ng-content></ng-content>
.link {
text-decoration: none;
color: inherit;
.content {
max-width: 160px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
Legend
Html element with directive