File

libs/common/ui/src/summary-panel/summary-panel.component.ts

Metadata

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor()

Inputs

id
Type : string
title
Type : string
Default value : ''
variant
Type : StyleOfThePanel

Methods

pushEvent
pushEvent(expanded: boolean)
Parameters :
Name Type Optional
expanded boolean No
Returns : void

Properties

evaluatedExpandedState
Default value : false
expanded
Default value : input<string | boolean>(false)
isExpert
Type : boolean

Accessors

id
setid(id: string)
Parameters :
Name Type Optional
id string No
Returns : void
ndbxStyle
getndbxStyle()
import { CHANNEL, CHANNEL_TOKEN, TalyStateService } from '@allianz/taly-core';
import { pushEvent } from '@allianz/tracking';
import { Component, DestroyRef, effect, inject, input, Input } from '@angular/core';
import { AccordionStyle } from '@allianz/ng-aquila/accordion';
import startCase from 'lodash-es/startCase';
import { first, tap } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

type StyleOfThePanel = Uppercase<AccordionStyle>;

@Component({
  selector: 'bc-summary-panel',
  templateUrl: 'summary-panel.component.html',
  styleUrls: ['summary-panel.component.scss'],
  standalone: false
})
export class SummaryPanelComponent {
  private _channel = inject<CHANNEL>(CHANNEL_TOKEN);

  @Input() set id(id: string) {
    this._id = id;
    this._trackingId = this.formatTrackingId(this._id);
  }

  @Input() title = '';
  expanded = input<string | boolean>(false);
  @Input() variant?: StyleOfThePanel;

  isExpert: boolean;
  evaluatedExpandedState = false;
  private _trackingId = '';
  private _id = '';

  private talyStateService = inject(TalyStateService, { optional: true });
  private destroyRef = inject(DestroyRef);

  constructor() {
    this.isExpert = this._channel === CHANNEL.EXPERT;

    effect(() => {
      const expandedValue = this.expanded();

      if (typeof expandedValue === 'string') {
        if (!this.talyStateService) {
          console.warn(
            'Please provide TalyStateService if you want to make panels expandable based on conditions'
          );
          return;
        }

        this.talyStateService
          .evaluateCondition$(expandedValue, false)
          .pipe(
            takeUntilDestroyed(this.destroyRef),
            first(),
            tap((evaluatedCondition) => (this.evaluatedExpandedState = evaluatedCondition))
          )
          .subscribe();
      } else {
        this.evaluatedExpandedState = expandedValue;
      }
    });
  }

  get ndbxStyle(): AccordionStyle {
    return (this.variant?.toLowerCase() as AccordionStyle) ?? 'regular';
  }

  private formatTrackingId(configId: string): string {
    const id = startCase(configId).replace(/\s/g, '');
    return `btn_Accordion_${id}`;
  }

  pushEvent(expanded: boolean): void {
    const status = expanded ? 'Open' : 'Closed';
    pushEvent(this._trackingId, status);
  }
}
@if (isExpert) {
<nx-expansion-panel
  [expanded]="evaluatedExpandedState"
  [variant]="ndbxStyle"
  (expandedChange)="pushEvent($event)"
  data-testid="expertPanel"
>
  <nx-expansion-panel-header>
    <nx-expansion-panel-title>
      {{ title }}
    </nx-expansion-panel-title>
  </nx-expansion-panel-header>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</nx-expansion-panel>
} @else {
<nx-expansion-panel
  [expanded]="evaluatedExpandedState"
  [variant]="ndbxStyle"
  class="panel"
  (expandedChange)="pushEvent($event)"
  data-testid="retailPanel"
>
  <ng-container ngProjectAs="nx-expansion-panel-header">
    <div nxLayout="grid nopadding">
      <div nxRow rowJustify="center">
        <div nxCol="12,12,8">
          <nx-expansion-panel-header>
            <nx-expansion-panel-title>
              {{ title }}
            </nx-expansion-panel-title>
          </nx-expansion-panel-header>
        </div>
      </div>
    </div>
  </ng-container>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</nx-expansion-panel>
@if (ndbxStyle === 'light') {
<div nxLayout="grid nopadding">
  <div nxRow rowJustify="center">
    <div nxCol="12,12,8">
      <div class="border"></div>
    </div>
  </div>
</div>
} }

<ng-template #content>
  <ng-content></ng-content>
</ng-template>

summary-panel.component.scss

:host {
  display: block;
  .panel {
    box-shadow: none !important;
  }
  .border {
    box-shadow: inset 0 1px 0 0 var(--accordion-light-border-color);
    min-height: 1px;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""