TALY - The Allianz Library
  1. Components
  2. SpinnerComponent

File

libs/common/frame/src/frame-parts/spinner/spinner.component.ts

Metadata

selector taly-spinner
styleUrls ./spinner.component.scss
templateUrl ./spinner.component.html

Index

Inputs
Accessors

Inputs

label
Type : ExtendedDisplayMessage | null | undefined
Defined in libs/common/frame/src/frame-parts/spinner/spinner.component.ts:15

Accessors

label
setlabel(label: ExtendedDisplayMessage | null | undefined)
Defined in libs/common/frame/src/frame-parts/spinner/spinner.component.ts:15
Parameters :
Name Type Optional
label ExtendedDisplayMessage | null | undefined No
Returns : void
headline
getheadline()
Defined in libs/common/frame/src/frame-parts/spinner/spinner.component.ts:22
subline
getsubline()
Defined in libs/common/frame/src/frame-parts/spinner/spinner.component.ts:26
 
import { Component, Input } from '@angular/core';
import { LocalizeFn } from '@angular/localize/init';
import { ExtendedDisplayMessage } from '@allianz/ngx-pfe';

declare let $localize: LocalizeFn;

@Component({
  selector: 'taly-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  standalone: false
})
export class SpinnerComponent {
  @Input()
  set label(label: ExtendedDisplayMessage | null | undefined) {
    this._label = {
      headline: label?.headline || $localize`:@@frame.spinner-label:Loading...`,
      subline: label?.subline
    };
  }

  get headline(): string {
    return this._label.headline;
  }

  get subline(): string | undefined {
    return this._label?.subline;
  }

  private _label!: ExtendedDisplayMessage;
}

<div class="spinner-container">
  <nx-spinner size="large" data-testid="nx-spinner"></nx-spinner>

  <p
    nxHeadline="subsection-xsmall"
    class="nx-margin-top-s nx-margin-bottom-0 nx-font-weight-regular"
    data-testid="spinner-headline"
  >
    {{ headline }}
  </p>

  <p
    nxCopytext
    class="nx-margin-top-2xs nx-margin-bottom-0 spinner-subline"
    data-testid="spinner-subline"
    *ngIf="subline"
  >
    {{ subline }}
  </p>
</div>

./spinner.component.scss 

:host {
  background: rgba(0, 0, 0, 0.35);
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 344px;
  margin: auto;
  padding: 40px;
  border-radius: var(--card-border-radius);
  background: var(--modal-background-color);
  box-shadow: var(--shadow-large);
  text-align: center;
}

.spinner-subline {
  color: var(--ui-05);
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""