storefrontapp documentation
  1. Components
  2. ConfiguratorAttributeSingleSelectionImageComponent

File

feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts

Extends

ConfiguratorAttributeBaseComponent

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector cx-configurator-attribute-single-selection-image
templateUrl ./configurator-attribute-single-selection-image.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

attribute
Type : Configurator.Attribute
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:26
ownerKey
Type : string
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:27

Outputs

selectionChange
Type : EventEmitter
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:29

Methods

extractValuePriceFormulaParameters
extractValuePriceFormulaParameters(value?: Configurator.Value)
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:51
Parameters :
Name Type Optional
value Configurator.Value Yes
Returns : ConfiguratorPriceComponentOptions | undefined
ngOnInit
ngOnInit()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:31
Returns : void
onClick
onClick(value: string)
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:40

Submits a value.

Parameters :
Name Type Optional Description
value string No
  • Selected value
Returns : void
createAriaLabelledBy
createAriaLabelledBy(prefix: string, attributeId: string, valueId?: string, hasQuantity?: boolean)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:89

Creates unique key for attribute 'aria-labelledby'

Parameters :
Name Type Optional
prefix string No
attributeId string No
valueId string Yes
hasQuantity boolean Yes
Returns : string
createAttributeIdForConfigurator
createAttributeIdForConfigurator(currentAttribute: Configurator.Attribute)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:73

Creates unique key for config attribute to be sent to configurator

Parameters :
Name Type Optional
currentAttribute Configurator.Attribute No
Returns : string
createAttributeUiKey
createAttributeUiKey(prefix: string, attributeId: string)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:59

Creates unique key for config attribute on the UI

Parameters :
Name Type Optional Description
prefix string No

for key depending on usage (e.g. uiType, label)
attributeId string No
Returns : string
createAttributeValueIdForConfigurator
createAttributeValueIdForConfigurator(currentAttribute: Configurator.Attribute, value: string)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:37

Creates unique key for config value to be sent to configurator

Parameters :
Name Type Optional
currentAttribute Configurator.Attribute No
value string No
Returns : string
createFocusId
createFocusId(attributeId: string, valueCode: string)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:133

Creates a unique key for focus handling for the given attribute and value

Parameters :
Name Type Optional
attributeId string No
valueCode string No
Returns : string

focus key
createValueUiKey
createValueUiKey(prefix: string, attributeId: string, valueId: string)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:20

Creates unique key for config value on the UI

Parameters :
Name Type Optional Description
prefix string No

for key depending on usage (e.g. uiType, label)
attributeId string No
valueId string No
Returns : string
Protected getAttributeCode
getAttributeCode(attribute: Configurator.Attribute)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:147

Get code from attribute. The code is not a mandatory attribute (since not available for VC flavour), still it is mandatory in the context of CPQ. Calling this method therefore only makes sense when CPQ is active. In case the method is called in the wrong context, an exception will be thrown

Parameters :
Name Type Optional
attribute Configurator.Attribute No
Returns : number

Attribute code
Protected getUiType
getUiType(attribute: Configurator.Attribute)
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:48
Parameters :
Name Type Optional
attribute Configurator.Attribute No
Returns : string

Properties

attribute
Type : Configurator.Attribute
Decorators :
@Input()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:26
attributeRadioButtonForm
Default value : new FormControl('')
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:24
ownerKey
Type : string
Decorators :
@Input()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:27
selectionChange
Default value : new EventEmitter<ConfigFormUpdateEvent>()
Decorators :
@Output()
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/single-selection-image/configurator-attribute-single-selection-image.component.ts:29
Private Static PREFIX
Type : string
Default value : 'cx-configurator'
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:9
Private Static PREFIX_DDLB_OPTION_PRICE_VALUE
Type : string
Default value : 'option--price'
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:12
Private Static PREFIX_LABEL
Type : string
Default value : 'label'
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:10
Private Static PREFIX_OPTION_PRICE_VALUE
Type : string
Default value : 'price--optionsPriceValue'
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:11
Private Static SEPERATOR
Type : string
Default value : '--'
Inherited from ConfiguratorAttributeBaseComponent
Defined in ConfiguratorAttributeBaseComponent:8 
import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Configurator } from '../../../../core/model/configurator.model';
import { ConfigFormUpdateEvent } from '../../../form/configurator-form.event';
import { ConfiguratorPriceComponentOptions } from '../../../price/configurator-price.component';
import { ConfiguratorAttributeBaseComponent } from '../base/configurator-attribute-base.component';

@Component({
  selector: 'cx-configurator-attribute-single-selection-image',
  templateUrl: './configurator-attribute-single-selection-image.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeSingleSelectionImageComponent
  extends ConfiguratorAttributeBaseComponent
  implements OnInit
{
  attributeRadioButtonForm = new FormControl('');

  @Input() attribute: Configurator.Attribute;
  @Input() ownerKey: string;

  @Output() selectionChange = new EventEmitter<ConfigFormUpdateEvent>();

  ngOnInit(): void {
    this.attributeRadioButtonForm.setValue(this.attribute.selectedSingleValue);
  }

  /**
   * Submits a value.
   *
   * @param {string} value - Selected value
   */
  onClick(value: string): void {
    const event: ConfigFormUpdateEvent = {
      ownerKey: this.ownerKey,
      changedAttribute: {
        ...this.attribute,
        selectedSingleValue: value,
      },
    };
    this.selectionChange.emit(event);
  }

  extractValuePriceFormulaParameters(
    value?: Configurator.Value
  ): ConfiguratorPriceComponentOptions | undefined {
    if (value) {
      return {
        price: value.valuePrice,
        isLightedUp: value.selected,
      };
    }
  }
}

<div id="{{ createAttributeIdForConfigurator(attribute) }}" class="cx-row">
  <div
    *ngFor="let value of attribute.values"
    id="{{ createAttributeValueIdForConfigurator(attribute, value.valueCode) }}"
    class="cx-configurator-select"
  >
    <input
      id="{{
        createAttributeValueIdForConfigurator(attribute, value.valueCode) +
          '-input'
      }}"
      type="radio"
      class="form-input"
      [value]="value.valueCode"
      formcontrolname="attributeRadioButtonForm"
      [formControl]="attributeRadioButtonForm"
      [value]="value.valueCode"
      name="{{ createAttributeIdForConfigurator(attribute) }}"
      attr.name="{{ createAttributeIdForConfigurator(attribute) }}"
      [attr.required]="attribute.required"
      [attr.aria-labelledby]="
        createAriaLabelledBy('label', attribute.name, value.valueCode)
      "
      [attr.aria-checked]="
        attributeRadioButtonForm.value === value.valueCode ? true : false
      "
      [attr.checked]="
        attributeRadioButtonForm.value === value.valueCode ? 'checked' : null
      "
      (click)="onClick(value.valueCode)"
      [cxFocus]="{ key: attribute.name + '-' + value.name }"
    />
    <div class="cx-label-container">
      <label
        id="{{ createValueUiKey('label', attribute.name, value.valueCode) }}"
        for="{{
          createAttributeValueIdForConfigurator(attribute, value.valueCode) +
            '-input'
        }}"
        class="form-check-label form-radio-label"
      >
        <img
          *ngIf="value.images[0]"
          class="cx-img"
          src="{{ value.images[0].url }}"
          alt="{{ value.images[0].altText }}"
        />
        <div *ngIf="!value.images[0]" class="cx-img-dummy"></div>
        {{ value.valueDisplay }}
        <cx-configurator-price
          [formula]="extractValuePriceFormulaParameters(value)"
        ></cx-configurator-price>
      </label>
    </div>
  </div>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""