src/app/pages/people-profile/contact-info/contact-info.component.ts
Component displaying contact information sidebar
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-contact-info |
| imports |
HraCommonModule
PageSectionComponent
|
| templateUrl | ./contact-info.component.html |
| styleUrl | ./contact-info.component.scss |
Inputs |
| image | |
Type : string | undefined
|
|
| Required : true | |
|
Profile picture URL |
|
| role | |
Type : AnyRole | undefined
|
|
| Required : true | |
|
Primary role information |
|
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { HraCommonModule } from '@hra-ui/common';
import { PageSectionComponent } from '@hra-ui/design-system/content-templates/page-section';
import { AnyRole } from '../../../schemas/roles.schema';
/**
* Component displaying contact information sidebar
*/
@Component({
selector: 'cns-contact-info',
imports: [HraCommonModule, PageSectionComponent],
templateUrl: './contact-info.component.html',
styleUrl: './contact-info.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContactInfoComponent {
/** Profile picture URL */
readonly image = input.required<string | undefined>();
/** Primary role information */
readonly role = input.required<AnyRole | undefined>();
}
@if (image(); as src) {
<div class="profile-picture">
<img alt="Profile picture" [attr.src]="src | assetUrl" />
</div>
}
@let data = role();
@if (data && data.type === 'member') {
<hra-page-section class="contact-info-section" tagline="Contact info" [level]="5">
@if (data.office; as office) {
<hra-page-section tagline="Office" [level]="6">
<div class="value">{{ office }}</div>
</hra-page-section>
}
@if (data.phone; as phone) {
<hra-page-section tagline="Phone" [level]="6">
<div class="value">{{ phone }}</div>
</hra-page-section>
}
@if (data.fax; as fax) {
<hra-page-section tagline="Fax" [level]="6">
<div class="value">{{ fax }}</div>
</hra-page-section>
}
@if (data.email; as email) {
<hra-page-section tagline="Email" [level]="6">
<div class="value">
<a [attr.href]="`mailto:${email}`">{{ email }}</a>
</div>
</hra-page-section>
}
</hra-page-section>
}