File

feature-libs/product-configurator/rulebased/components/overview-attribute/configurator-overview-attribute.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector cx-configurator-overview-attribute
templateUrl ./configurator-overview-attribute.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(breakpointService: BreakpointService)
Parameters :
Name Type Optional
breakpointService BreakpointService No

Inputs

attributeOverview
Type : Configurator.AttributeOverview

Methods

extractPriceFormulaParameters
extractPriceFormulaParameters()
isDesktop
isDesktop()

Verifies whether the current screen size equals or is larger than breakpoint BREAKPOINT.md.

Returns : Observable<boolean>
  • If the given breakpoint equals or is larger thanBREAKPOINT.md returns true, otherwise false.

Properties

attributeOverview
Type : Configurator.AttributeOverview
Decorators :
@Input()
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { BREAKPOINT, BreakpointService } from '@spartacus/storefront';
import { Configurator } from '../../core/model/configurator.model';
import { ConfiguratorPriceComponentOptions } from '../price/configurator-price.component';
import { Observable } from 'rxjs';

@Component({
  selector: 'cx-configurator-overview-attribute',
  templateUrl: './configurator-overview-attribute.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorOverviewAttributeComponent {
  @Input() attributeOverview: Configurator.AttributeOverview;

  constructor(protected breakpointService: BreakpointService) {}

  extractPriceFormulaParameters(): ConfiguratorPriceComponentOptions {
    return {
      quantity: this.attributeOverview.quantity,
      price: this.attributeOverview.valuePrice,
      priceTotal: this.attributeOverview.valuePriceTotal,
      isLightedUp: true,
    };
  }

  /**
   * Verifies whether the current screen size equals or is larger than breakpoint `BREAKPOINT.md`.
   *
   * @returns {Observable<boolean>} - If the given breakpoint equals or is larger than`BREAKPOINT.md` returns `true`, otherwise `false`.
   */
  isDesktop(): Observable<boolean> {
    return this.breakpointService.isUp(BREAKPOINT.md);
  }
}
<div class="cx-attribute-value">{{ attributeOverview.value }}</div>
<ng-container *ngIf="isDesktop() | async; else mobile">
  <div
    class="cx-attribute-label"
    [attr.aria-label]="attributeOverview.attribute"
  >
    {{ attributeOverview.attribute }}
  </div>
  <div class="cx-attribute-price">
    <cx-configurator-price
      [formula]="extractPriceFormulaParameters()"
    ></cx-configurator-price>
  </div>
</ng-container>
<ng-template #mobile>
  <div class="cx-attribute-price">
    <cx-configurator-price
      [formula]="extractPriceFormulaParameters()"
    ></cx-configurator-price>
  </div>
  <div
    class="cx-attribute-label"
    [attr.aria-label]="attributeOverview.attribute"
  >
    {{ attributeOverview.attribute }}
  </div>
</ng-template>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""