File

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

Extends

ConfiguratorAttributeBaseComponent

Implements

OnInit

Metadata

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

Index

Constructor

constructor(configUtilsService: ConfiguratorStorefrontUtilsService)

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:27

Parameters :

Name	Type	Optional
configUtilsService	`ConfiguratorStorefrontUtilsService`	No

Inputs

attribute
Type : `Configurator.Attribute`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:24

ownerKey
Type : `string`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:25

Outputs

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

Methods

extractValuePriceFormulaParameters

extractValuePriceFormulaParameters(value: Configurator.Value)

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:78

Parameters :

Name	Type	Optional
value	`Configurator.Value`	No

Returns : ConfiguratorPriceComponentOptions | undefined

ngOnInit

ngOnInit()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:37

Returns : void

onSelect

onSelect(index: number)

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:56

Fired when a value has been selected

Parameters :

Name	Type	Optional	Description
index	`number`	No	Index of 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/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:24

attributeCheckBoxForms

Default value : new Array<FormControl>()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:35

ownerKey

Type : string

Decorators :


                            @Input()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:25

selectionChange

Default value : new EventEmitter<ConfigFormUpdateEvent>()

Decorators :


                            @Output()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/multi-selection-image/configurator-attribute-multi-selection-image.component.ts:27

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 { ConfiguratorStorefrontUtilsService } from '../../../service/configurator-storefront-utils.service';
import { ConfiguratorAttributeBaseComponent } from '../base/configurator-attribute-base.component';
@Component({
  selector: 'cx-configurator-attribute-multi-selection-image',
  templateUrl: './configurator-attribute-multi-selection-image.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeMultiSelectionImageComponent
  extends ConfiguratorAttributeBaseComponent
  implements OnInit
{
  @Input() attribute: Configurator.Attribute;
  @Input() ownerKey: string;

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

  constructor(
    protected configUtilsService: ConfiguratorStorefrontUtilsService
  ) {
    super();
  }

  attributeCheckBoxForms = new Array<FormControl>();

  ngOnInit() {
    const values = this.attribute.values;
    if (values) {
      for (const value of values) {
        let attributeCheckBoxForm: FormControl;
        if (value.selected) {
          attributeCheckBoxForm = new FormControl(true);
        } else {
          attributeCheckBoxForm = new FormControl(false);
        }
        this.attributeCheckBoxForms.push(attributeCheckBoxForm);
      }
    }
  }

  /**
   * Fired when a value has been selected
   * @param index Index of selected value
   */
  onSelect(index: number): void {
    this.attributeCheckBoxForms[index].setValue(
      !this.attributeCheckBoxForms[index].value
    );

    const selectedValues =
      this.configUtilsService.assembleValuesForMultiSelectAttributes(
        this.attributeCheckBoxForms,
        this.attribute
      );

    const event: ConfigFormUpdateEvent = {
      ownerKey: this.ownerKey,
      changedAttribute: {
        ...this.attribute,
        values: selectedValues,
      },
    };

    this.selectionChange.emit(event);
  }

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

<div id="{{ createAttributeIdForConfigurator(attribute) }}" class="cx-row">
  <div
    *ngFor="let value of attribute.values; let i = index"
    id="{{ createAttributeValueIdForConfigurator(attribute, value.valueCode) }}"
    class="cx-configurator-select"
  >
    <input
      id="{{
        createAttributeValueIdForConfigurator(attribute, value.valueCode) +
          '-input'
      }}"
      type="checkbox"
      class="form-input"
      [value]="value.valueCode"
      [formControl]="attributeCheckBoxForms[i]"
      name="{{ createAttributeIdForConfigurator(attribute) }}"
      (click)="onSelect(i)"
      [attr.aria-labelledby]="
        createValueUiKey('label', attribute.name, value.valueCode)
      "
      [attr.aria-checked]="attributeCheckBoxForms[i].value"
      [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"
      >
        <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

File

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""