Code Documentation for design-system
  1. Components
  2. UiSectionComponent

File

content-templates/ui-section/src/lib/ui-section.component.ts

Description

UI Section component for displaying app information and status

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector hra-ui-section
imports AppLabelComponent AssetUrlPipe ButtonsModule IconsModule HraCommonModule RouterModule
templateUrl ./ui-section.component.html
styleUrl ./ui-section.component.scss

Index

Inputs
Outputs

Inputs

appStatus
Type : SoftwareStatus
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:28

App software status
appUrl
Type : string
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:30

App URL
description
Type : string
Required :  true
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:22

Product description
documentationUrl
Type : string
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:34

Documentation URL
imagePath
Type : string
Required :  true
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:24

Product image path
logo
Type : string
Required :  true
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:26

Product logo
tagline
Type : string
Required :  true
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:20

Product title

Outputs

openAppUrl
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:32

Open the app url
openDocumentationLink
Defined in content-templates/ui-section/src/lib/ui-section.component.ts:36

Open the documentation link

 
import { AssetUrlPipe } from '@hra-ui/common/url';
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HraCommonModule } from '@hra-ui/common';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { AppLabelComponent } from '@hra-ui/design-system/content-templates/app-label';
import { IconsModule } from '@hra-ui/design-system/icons';
import { SoftwareStatus } from '@hra-ui/design-system/indicators/software-status-indicator';

/** UI Section component for displaying app information and status */
@Component({
  selector: 'hra-ui-section',
  imports: [AppLabelComponent, AssetUrlPipe, ButtonsModule, IconsModule, HraCommonModule, RouterModule],
  templateUrl: './ui-section.component.html',
  styleUrl: './ui-section.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UiSectionComponent {
  /** Product title */
  readonly tagline = input.required<string>();
  /** Product description */
  readonly description = input.required<string>();
  /** Product image path */
  readonly imagePath = input.required<string>();
  /** Product logo */
  readonly logo = input.required<string>();
  /** App software status */
  readonly appStatus = input<SoftwareStatus>();
  /** App URL */
  readonly appUrl = input<string>();
  /** Open the app url */
  readonly openAppUrl = output();
  /** Documentation URL */
  readonly documentationUrl = input<string>();
  /** Open the documentation link */
  readonly openDocumentationLink = output();
}

<img class="app-image" alt="" [attr.src]="imagePath() | assetUrl" />
<div class="ui-content-main">
  <hra-app-label class="label" [tagline]="tagline()" [logo]="logo()" [appStatus]="appStatus()" />
  <p class="ui-content-description">
    {{ description() }}
  </p>
  <div class="ui-section-buttons">
    <ng-container hraFeature="use-app">
      @if (appUrl()?.startsWith('http')) {
        <a hraClickEvent mat-button hraCtaButton target="_self" rel="noopener noreferrer" [attr.href]="appUrl()">
          Use app
          <mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
        </a>
      } @else {
        <a hraClickEvent mat-button hraCtaButton [routerLink]="appUrl()">
          Use app
          <mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
        </a>
      }
    </ng-container>

    <ng-container hraFeature="learn-more">
      @if (documentationUrl()?.startsWith('http')) {
        <a
          mat-button
          hraCtaButton
          hraClickEvent
          hraButtonVariant="secondary"
          disableRipple
          target="_self"
          rel="noopener noreferrer"
          [attr.href]="documentationUrl()"
        >
          Learn more
          <mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
        </a>
      } @else {
        <a
          hraClickEvent
          mat-button
          hraCtaButton
          hraButtonVariant="secondary"
          disableRipple
          [routerLink]="documentationUrl()"
        >
          Learn more
          <mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
        </a>
      }
    </ng-container>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""