feature-libs/product-configurator/rulebased/components/attribute/types/checkbox/configurator-attribute-checkbox.component.ts
ConfiguratorAttributeBaseComponent
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cx-configurator-attribute-checkbox |
| templateUrl | ./configurator-attribute-checkbox.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
| attribute | |
Type : Configurator.Attribute
|
|
| group | |
Type : string
|
|
| ownerKey | |
Type : string
|
|
| selectionChange | |
Type : EventEmitter
|
|
| Protected assembleSingleValue |
assembleSingleValue()
|
|
Returns :
Configurator.Value[]
|
| extractValuePriceFormulaParameters | ||||||||
extractValuePriceFormulaParameters(value: Configurator.Value)
|
||||||||
|
Extract corresponding value price formula parameters. For the multi-selection attribute types the complete price formula should be displayed at the value level.
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onSelect |
onSelect()
|
|
Fired when a check box has been selected i.e. when a value has been set
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 :
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 :
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 :
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 :
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
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 :
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 :
Returns :
number
Attribute code |
| Protected getUiType | ||||||
getUiType(attribute: Configurator.Attribute)
|
||||||
|
Inherited from
ConfiguratorAttributeBaseComponent
|
||||||
|
Defined in
ConfiguratorAttributeBaseComponent:48
|
||||||
|
Parameters :
Returns :
string
|
| attribute |
Type : Configurator.Attribute
|
Decorators :
@Input()
|
| attributeCheckBoxForm |
Default value : new FormControl('')
|
| group |
Type : string
|
Decorators :
@Input()
|
| ownerKey |
Type : string
|
Decorators :
@Input()
|
| selectionChange |
Default value : new EventEmitter<ConfigFormUpdateEvent>()
|
Decorators :
@Output()
|
| 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';
import { ConfiguratorAttributeBaseComponent } from '../base/configurator-attribute-base.component';
@Component({
selector: 'cx-configurator-attribute-checkbox',
templateUrl: './configurator-attribute-checkbox.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeCheckBoxComponent
extends ConfiguratorAttributeBaseComponent
implements OnInit
{
@Input() attribute: Configurator.Attribute;
@Input() group: string;
@Input() ownerKey: string;
@Output() selectionChange = new EventEmitter<ConfigFormUpdateEvent>();
attributeCheckBoxForm = new FormControl('');
ngOnInit() {
this.attributeCheckBoxForm.setValue(this.attribute.selectedSingleValue);
}
/**
* Fired when a check box has been selected i.e. when a value has been set
*/
onSelect(): void {
const selectedValues = this.assembleSingleValue();
const event: ConfigFormUpdateEvent = {
ownerKey: this.ownerKey,
changedAttribute: {
...this.attribute,
values: selectedValues,
},
};
this.selectionChange.emit(event);
}
protected assembleSingleValue(): Configurator.Value[] {
const localAssembledValues: Configurator.Value[] = [];
const value = this.attribute.values ? this.attribute.values[0] : undefined;
//we can assume that for this component, value is always present
if (value) {
const localAttributeValue: Configurator.Value = {
valueCode: value.valueCode,
};
localAttributeValue.name = value.name;
localAttributeValue.selected = this.attributeCheckBoxForm.value;
localAssembledValues.push(localAttributeValue);
}
return localAssembledValues;
}
/**
* Extract corresponding value price formula parameters.
* For the multi-selection attribute types the complete price formula should be displayed at the value level.
*
* @param {Configurator.Value} value - Configurator value
* @return {ConfiguratorPriceComponentOptions} - New price formula
*/
extractValuePriceFormulaParameters(
value: Configurator.Value
): ConfiguratorPriceComponentOptions | undefined {
return {
quantity: value.quantity,
price: value.valuePrice,
priceTotal: value.valuePriceTotal,
isLightedUp: value.selected,
};
}
}
<ng-container *cxFeatureLevel="'!4.1'">
<div id="{{ createAttributeIdForConfigurator(attribute) }}">
<div class="form-check">
<input
id="{{
createAttributeValueIdForConfigurator(
attribute,
attribute?.values[0].valueCode
)
}}"
type="checkbox"
class="form-check-input"
[value]="attribute?.values[0].valueCode"
[cxFocus]="{ key: attribute.name + '-' + attribute?.values[0].name }"
(change)="onSelect()"
[formControl]="attributeCheckBoxForm"
name="{{ createAttributeIdForConfigurator(attribute) }}"
/>
<label
id="{{
createValueUiKey(
'label',
attribute.name,
attribute?.values[0].valueCode
)
}}"
for="{{
createAttributeValueIdForConfigurator(
attribute,
attribute?.values[0].valueCode
)
}}"
class="form-check-label"
>{{ attribute?.values[0].valueDisplay }}</label
>
</div>
</div>
</ng-container>
<ng-container *cxFeatureLevel="'4.1'">
<fieldset>
<legend style="display: none">{{ attribute.label }}</legend>
<div id="{{ createAttributeIdForConfigurator(attribute) }}">
<div class="form-check">
<div class="cx-value-label-pair">
<input
id="{{
createAttributeValueIdForConfigurator(
attribute,
attribute?.values[0].valueCode
)
}}"
type="checkbox"
class="form-check-input"
[value]="attribute?.values[0].valueCode"
[cxFocus]="{
key: attribute.name + '-' + attribute?.values[0].name
}"
(change)="onSelect()"
[formControl]="attributeCheckBoxForm"
name="{{ createAttributeIdForConfigurator(attribute) }}"
/>
<label
id="{{
createValueUiKey(
'label',
attribute.name,
attribute?.values[0].valueCode
)
}}"
for="{{
createAttributeValueIdForConfigurator(
attribute,
attribute?.values[0].valueCode
)
}}"
class="form-check-label"
>{{ attribute?.values[0].valueDisplay }}</label
>
</div>
<div class="cx-value-price">
<cx-configurator-price
[formula]="extractValuePriceFormulaParameters(attribute?.values[0])"
></cx-configurator-price>
</div>
</div>
</div>
</fieldset>
</ng-container>