File

src/app/components/footer/footer.component.ts

Description

CNS footer component

Metadata

Index

Properties
Methods
Inputs

Inputs

funders
Default value : FUNDER_IDS

List of funders to show

socials
Default value : CNS_SOCIAL_IDS

List of social media link to show

Methods

openPrivacyPreferences
openPrivacyPreferences(event: Event)

Open Privacy Preferences Modal

Parameters :
Name Type Optional
event Event No
Returns : void

Properties

Readonly copyrightText
Type : unknown
Default value : computed( () => `© ${new Date().getFullYear()} Cyberinfrastructure for Network Science Center at Indiana University`, )

Copyright text (always uses current year)

import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { HraCommonModule } from '@hra-ui/common';
import { RouterExtModule } from '@hra-ui/common/router-ext';
import { BrandModule } from '@hra-ui/design-system/brand';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { PrivacyPreferencesService } from '@hra-ui/design-system/privacy';
import { InlineSVGModule } from 'ng-inline-svg-2';
import { CNS_SOCIAL_IDS } from '../static-data/parsed';
import { FundingComponent } from './funding/funding.component';
import { FUNDER_IDS } from './static-data/parsed';

/**
 * CNS footer component
 */
@Component({
  selector: 'cns-footer',
  imports: [
    HraCommonModule,
    RouterExtModule,
    MatIconModule,
    BrandModule,
    ButtonsModule,
    FundingComponent,
    MatDividerModule,
    InlineSVGModule,
  ],
  templateUrl: './footer.component.html',
  styleUrl: './footer.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterComponent {
  /** List of funders to show */
  readonly funders = input(FUNDER_IDS);
  /** List of social media link to show */
  readonly socials = input(CNS_SOCIAL_IDS);
  /** inject Privacy Preference Service */
  private readonly privacyPreferences = inject(PrivacyPreferencesService);

  /** Copyright text (always uses current year) */
  readonly copyrightText = computed(
    () => `© ${new Date().getFullYear()} Cyberinfrastructure for Network Science Center at Indiana University`,
  );

  /** Open Privacy Preferences Modal */
  openPrivacyPreferences(event: Event): void {
    event.preventDefault();
    this.privacyPreferences.openPrivacyPreferences('manage');
  }
}
<footer hraFeature="footer">
  <div class="content-container">
    <div class="logo-and-socials">
      <a
        class="logo"
        hraFeature="logo"
        hraClickEvent
        aria-label="Visit CNS"
        hraLink="https://cns.iu.edu/"
        [inlineSVG]="'assets/cns_footer_logo.svg' | assetUrl"
      >
      </a>
      <div class="socials">
        @for (id of socials(); track id) {
          <hra-social-media-button size="large" variant="color" [id]="$any(id)" />
        }
      </div>
    </div>

    <cns-funding [funders]="funders()" />
  </div>

  <mat-divider />

  <div class="privacy-container">
    <span class="privacy">
      <button hraTextButton (click)="openPrivacyPreferences($event)">Privacy Preferences</button>
      <div class="separator">&#183;</div>
      <a hraHyperlink hraFeature="hra-privacy-policy" hraLink="https://cns.iu.edu/privacy-policy">Privacy Policy</a>
    </span>

    <span class="copyright"> {{ copyrightText() }} </span>
  </div>
</footer>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""