File

feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts

Extends

ConfiguratorAttributeBaseComponent

Implements

OnInit OnDestroy

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`cx-configurator-attribute-input-field`
templateUrl	`./configurator-attribute-input-field.component.html`

Index

Constructor

constructor(config: ConfiguratorUISettingsConfig)

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:42

Parameters :

Name	Type	Optional
config	`ConfiguratorUISettingsConfig`	No

Inputs

attribute
Type : `Configurator.Attribute`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:32

group
Type : `string`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:33

ownerKey
Type : `string`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:34

ownerType
Type : `CommonConfigurator.OwnerType`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:31

Outputs

inputChange
Type : `EventEmitter`
Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:36

Methods

ngOnDestroy

ngOnDestroy()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:84

Returns : void

ngOnInit

ngOnInit()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:48

Returns : void

onChange

onChange()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:70

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/input-field/configurator-attribute-input-field.component.ts:32

attributeInputForm

Default value : new FormControl('')

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:28

Protected Readonly FALLBACK_DEBOUNCE_TIME

Type : number

Default value : 500

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:42

In case no config is injected, or when the debounce time is not configured at all, this value will be used as fallback.

group

Type : string

Decorators :


                            @Input()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:33

inputChange

Default value : new EventEmitter<ConfigFormUpdateEvent>()

Decorators :


                            @Output()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:36

ownerKey

Type : string

Decorators :


                            @Input()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:34

ownerType

Type : CommonConfigurator.OwnerType

Decorators :


                            @Input()

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts:31

Protected sub

Type : Subscription

Defined in feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.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,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { CommonConfigurator } from '@spartacus/product-configurator/common';
import { Subscription, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
import { Configurator } from '../../../../core/model/configurator.model';
import { ConfiguratorUISettingsConfig } from '../../../config/configurator-ui-settings.config';
import { ConfigFormUpdateEvent } from '../../../form/configurator-form.event';
import { ConfiguratorAttributeBaseComponent } from '../base/configurator-attribute-base.component';

@Component({
  selector: 'cx-configurator-attribute-input-field',
  templateUrl: './configurator-attribute-input-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeInputFieldComponent
  extends ConfiguratorAttributeBaseComponent
  implements OnInit, OnDestroy
{
  attributeInputForm = new FormControl('');
  protected sub: Subscription;

  @Input() ownerType: CommonConfigurator.OwnerType;
  @Input() attribute: Configurator.Attribute;
  @Input() group: string;
  @Input() ownerKey: string;

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

  /**
   * In case no config is injected, or when the debounce time is not configured at all,
   * this value will be used as fallback.
   */
  protected readonly FALLBACK_DEBOUNCE_TIME = 500;

  constructor(protected config: ConfiguratorUISettingsConfig) {
    super();
  }

  ngOnInit() {
    this.attributeInputForm.setValue(this.attribute.userInput);
    if (
      this.ownerType === CommonConfigurator.OwnerType.CART_ENTRY &&
      this.attribute.required &&
      this.attribute.incomplete &&
      !this.attributeInputForm.value
    ) {
      this.attributeInputForm.markAsTouched();
    }
    this.sub = this.attributeInputForm.valueChanges
      .pipe(
        debounce(() =>
          timer(
            this.config.productConfigurator?.updateDebounceTime?.input ??
              this.FALLBACK_DEBOUNCE_TIME
          )
        )
      )
      .subscribe(() => this.onChange());
  }

  onChange(): void {
    const event: ConfigFormUpdateEvent = {
      ownerKey: this.ownerKey,
      changedAttribute: {
        ...this.attribute,
        userInput: this.attributeInputForm.value,
      },
    };

    if (!this.attributeInputForm.invalid) {
      this.inputChange.emit(event);
    }
  }

  ngOnDestroy() {
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }
}

<div id="{{ createAttributeIdForConfigurator(attribute) }}" class="form-group">
  <input
    [formControl]="attributeInputForm"
    [required]="attribute.required"
    class="form-control"
    attr.role="{{ attribute.dataType }}"
    attr.aria-required="{{ attribute.required }}"
    maxlength="{{ attribute.maxlength }}"
    attr.aria-labelledby="{{ createAriaLabelledBy('label', attribute.name) }}"
    [cxFocus]="{
      key: createAttributeIdForConfigurator(attribute)
    }"
  />
</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 ""