GH-13939 Skeleton of read-only attribute component

feature-libs/product-configurator/textfield/components/form/configurator-textfield-form.component.html

@@ -1,14 +1,28 @@
 <ng-container *ngIf="configuration$ | async as configuration">
-  <div
-    class="cx-attribute"
-    *ngFor="let attribute of configuration.configurationInfos"
-  >
-    <cx-configurator-textfield-input-field
-      [attribute]="attribute"
-      (inputChange)="updateConfiguration($event)"
-    ></cx-configurator-textfield-input-field>
-  </div>
-  <cx-configurator-textfield-add-to-cart-button
-    [configuration]="configuration"
-  ></cx-configurator-textfield-add-to-cart-button>
+  <ng-container *ngIf="isEditable$ | async as isEditable; else readonly">
+    <div
+      class="cx-attribute"
+      *ngFor="let attribute of configuration.configurationInfos"
+    >
+      <cx-configurator-textfield-input-field
+        [attribute]="attribute"
+        (inputChange)="updateConfiguration($event)"
+      ></cx-configurator-textfield-input-field>
+    </div>
+
+    <cx-configurator-textfield-add-to-cart-button
+      [configuration]="configuration"
+    ></cx-configurator-textfield-add-to-cart-button>
+  </ng-container>
+  <ng-template #readonly>
+    <div
+      class="cx-attribute"
+      *ngFor="let attribute of configuration.configurationInfos"
+    >
+      <cx-configurator-textfield-input-field-readonly
+        [attribute]="attribute"
+        (inputChange)="updateConfiguration($event)"
+      ></cx-configurator-textfield-input-field-readonly>
+    </div>
+  </ng-template>
 </ng-container>

feature-libs/product-configurator/textfield/components/form/configurator-textfield-form.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import {
   CommonConfigurator,
+  ConfiguratorRouter,
   ConfiguratorRouterExtractorService,
 } from '@spartacus/product-configurator/common';
 import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { ConfiguratorTextfieldService } from '../../core/facade/configurator-textfield.service';
 import { ConfiguratorTextfield } from '../../core/model/configurator-textfield.model';
 
@@ -34,6 +35,15 @@ export class ConfiguratorTextfieldFormComponent {
       })
     );
 
+  isEditable$: Observable<boolean> = this.configRouterExtractorService
+    .extractRouterData()
+    .pipe(
+      map(
+        (routerData) =>
+          routerData.pageType === ConfiguratorRouter.PageType.CONFIGURATION
+      )
+    );
+
   constructor(
     protected configuratorTextfieldService: ConfiguratorTextfieldService,
     protected configRouterExtractorService: ConfiguratorRouterExtractorService

feature-libs/product-configurator/textfield/components/index.ts

@@ -1,4 +1,5 @@
 export * from './add-to-cart-button/configurator-textfield-add-to-cart-button.component';
 export * from './form/configurator-textfield-form.component';
 export * from './input-field/configurator-textfield-input-field.component';
+export * from './input-field-readonly/configurator-textfield-input-field-readonly.component';
 export * from './textfield-configurator-components.module';

feature-libs/product-configurator/textfield/components/input-field-readonly/configurator-textfield-input-field-readonly.component.html

@@ -0,0 +1,15 @@
+readonly
+<label
+  id="{{ getIdLabel(attribute) }}"
+  class="cx-configurator-textfield-label"
+  [attr.aria-label]="attribute.configurationLabel"
+  >{{ attribute.configurationLabel }}</label
+>
+<div class="form-group">
+  <input
+    [formControl]="attributeInputForm"
+    class="form-control"
+    (change)="onInputChange()"
+    attr.aria-labelledby="{{ getIdLabel(attribute) }}"
+  />
+</div>

feature-libs/product-configurator/textfield/components/input-field-readonly/configurator-textfield-input-field-readonly.component.spec.ts

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ConfiguratorTextfieldInputFieldReadonlyComponent } from './configurator-textfield-input-field-readonly.component';
+
+describe('TextfieldInputFieldComponent', () => {
+  let component: ConfiguratorTextfieldInputFieldReadonlyComponent;
+
+  let fixture: ComponentFixture<ConfiguratorTextfieldInputFieldReadonlyComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ConfiguratorTextfieldInputFieldReadonlyComponent],
+        imports: [ReactiveFormsModule],
+      })
+        .overrideComponent(ConfiguratorTextfieldInputFieldReadonlyComponent, {
+          set: {
+            changeDetection: ChangeDetectionStrategy.Default,
+          },
+        })
+        .compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(
+      ConfiguratorTextfieldInputFieldReadonlyComponent
+    );
+    component = fixture.componentInstance;
+    component.attribute = {
+      configurationLabel: 'attributeName',
+      configurationValue: 'input123',
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set value on init', () => {
+    expect(component.attributeInputForm.value).toEqual('input123');
+  });
+
+  it('should emit a change event on change ', () => {
+    spyOn(component.inputChange, 'emit').and.callThrough();
+    component.onInputChange();
+    expect(component.inputChange.emit).toHaveBeenCalledWith(
+      component.attribute
+    );
+  });
+
+  it('should generate id with prefixt', () => {
+    expect(component.getId(component.attribute)).toEqual(
+      'cx-configurator-textfieldattributeName'
+    );
+  });
+});

feature-libs/product-configurator/textfield/components/input-field-readonly/configurator-textfield-input-field-readonly.component.ts

@@ -0,0 +1,68 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ConfiguratorTextfield } from '../../core/model/configurator-textfield.model';
+
+@Component({
+  selector: 'cx-configurator-textfield-input-field-readonly',
+  templateUrl: './configurator-textfield-input-field-readonly.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfiguratorTextfieldInputFieldReadonlyComponent
+  implements OnInit {
+  PREFIX_TEXTFIELD = 'cx-configurator-textfield';
+  attributeInputForm = new FormControl('');
+
+  @Input() attribute: ConfiguratorTextfield.ConfigurationInfo;
+  @Output()
+  inputChange = new EventEmitter<ConfiguratorTextfield.ConfigurationInfo>();
+
+  constructor() {}
+
+  ngOnInit() {
+    this.attributeInputForm.setValue(this.attribute.configurationValue);
+  }
+  /**
+   * Triggered if an attribute value is changed. Triggers the emission of the inputChange event emitter that is
+   * in turn received in the form component
+   */
+  onInputChange(): void {
+    const attribute: ConfiguratorTextfield.ConfigurationInfo = {
+      configurationLabel: this.attribute.configurationLabel,
+      configurationValue: this.attributeInputForm.value,
+    };
+
+    this.inputChange.emit(attribute);
+  }
+  /**
+   * Compiles an ID for the attribute label by using the label from the backend and a prefix 'label'
+   * @param attribute Textfield configurator attribute. Carries the attribute label information from the backend
+   * @returns ID
+   */
+  getIdLabel(attribute: ConfiguratorTextfield.ConfigurationInfo): string {
+    return (
+      this.PREFIX_TEXTFIELD + 'label' + this.getLabelForIdGeneration(attribute)
+    );
+  }
+  /**
+   * Compiles an ID for the attribute value by using the label from the backend
+   * @param attribute Textfield configurator attribute. Carries the attribute label information from the backend
+   * @returns ID
+   */
+  getId(attribute: ConfiguratorTextfield.ConfigurationInfo): string {
+    return this.PREFIX_TEXTFIELD + this.getLabelForIdGeneration(attribute);
+  }
+
+  protected getLabelForIdGeneration(
+    attribute: ConfiguratorTextfield.ConfigurationInfo
+  ): string {
+    //replace white spaces with an empty string
+    return attribute.configurationLabel.replace(/\s/g, '');
+  }
+}

feature-libs/product-configurator/textfield/components/textfield-configurator-components.module.ts

@@ -12,6 +12,7 @@ import {
 import { ConfiguratorTextfieldAddToCartButtonComponent } from './add-to-cart-button/configurator-textfield-add-to-cart-button.component';
 import { ConfiguratorTextfieldFormComponent } from './form/configurator-textfield-form.component';
 import { ConfiguratorTextfieldInputFieldComponent } from './input-field/configurator-textfield-input-field.component';
+import { ConfiguratorTextfieldInputFieldReadonlyComponent } from './input-field-readonly/configurator-textfield-input-field-readonly.component';
 
 @NgModule({
   imports: [
@@ -35,11 +36,13 @@ import { ConfiguratorTextfieldInputFieldComponent } from './input-field/configur
   declarations: [
     ConfiguratorTextfieldFormComponent,
     ConfiguratorTextfieldInputFieldComponent,
+    ConfiguratorTextfieldInputFieldReadonlyComponent,
     ConfiguratorTextfieldAddToCartButtonComponent,
   ],
   exports: [
     ConfiguratorTextfieldFormComponent,
     ConfiguratorTextfieldInputFieldComponent,
+    ConfiguratorTextfieldInputFieldReadonlyComponent,
     ConfiguratorTextfieldAddToCartButtonComponent,
   ],
 })