CXSPA-8968: Domain Values on Demand implementation

feature-libs/product-configurator/common/assets/translations/en/configurator.json

@@ -72,7 +72,8 @@
       "cancelConfiguration": "Cancel Configuration",
       "cancelConfigurationMobile": "Cancel",
       "filterOverview": "Filter",
-      "filterOverviewWithCount": "Filter ({{numAppliedFilters}})"
+      "filterOverviewWithCount": "Filter ({{numAppliedFilters}})",
+      "showOptions": "Show Options"
     },
     "icon": {
       "groupComplete": "Complete",
@@ -232,7 +233,8 @@
       "filterOverviewByGroup": "Filter configuration overview by group {{groupName}}",
       "closeConflictSolverModal": "Close conflict solver modal",
       "closeRestartDialog": "Close the \"Unfinished Configuration\" dialog and navigate back to the product details page",
-      "description": "Click to see a description for value {{ value }}"
+      "description": "Click to see a description for value {{ value }}",
+      "showOptionsForAttribute": "Show options for attribute {{ attribute }}"
     },
     "variantCarousel": {
       "title": "Pre-configured Versions"

feature-libs/product-configurator/rulebased/_index.scss

@@ -31,7 +31,7 @@ $configurator-rulebased-components: cx-configurator-template,
   cx-configurator-overview-notification-banner,
   cx-configuration-conflict-and-error-messages, cx-configurator-variant-carousel,
   cx-configurator-conflict-solver-dialog, cx-configurator-restart-dialog,
-  cx-configurator-exit-button !default;
+  cx-configurator-exit-button, cx-configurator-show-options !default;
 
 $configurator-rulebased-pages: VariantConfigurationTemplate,
   VariantConfigurationOverviewTemplate, CpqConfigurationTemplate,

feature-libs/product-configurator/rulebased/components/attribute/header/configurator-attribute-header.component.html

@@ -3,22 +3,30 @@
   {{ 'configurator.attribute.notVisibleAttributeMsg' | cxTranslate }}
 </div>
 
-<label
-  id="{{ createAttributeUiKey('label', attribute.name) }}"
-  [class.cx-required-error]="showRequiredMessageForDomainAttribute$ | async"
-  [attr.aria-label]="
-    !attribute.required
-      ? ('configurator.a11y.attribute'
-        | cxTranslate: { attribute: attribute.label })
-      : ('configurator.a11y.requiredAttribute'
-        | cxTranslate: { param: attribute.label })
-  "
-  ><span
-    [class.cx-required-icon]="attribute.required"
-    [attr.aria-describedby]="createAttributeUiKey('label', attribute.name)"
-    >{{ getLabel(expMode, attribute.label, attribute.name) }}</span
-  ></label
->
+<div class="cx-header-label-container">
+  <label
+    id="{{ createAttributeUiKey('label', attribute.name) }}"
+    [class.cx-required-error]="showRequiredMessageForDomainAttribute$ | async"
+    [attr.aria-label]="
+      !attribute.required
+        ? ('configurator.a11y.attribute'
+          | cxTranslate: { attribute: attribute.label })
+        : ('configurator.a11y.requiredAttribute'
+          | cxTranslate: { param: attribute.label })
+    "
+    ><span
+      [class.cx-required-icon]="attribute.required"
+      [attr.aria-describedby]="createAttributeUiKey('label', attribute.name)"
+      >{{ getLabel(expMode, attribute.label, attribute.name) }}</span
+    ></label
+  >
+
+  <cx-configurator-show-options
+    *ngIf="attribute.domainOnDemand"
+    [attributeComponentContext]="attributeComponentContext"
+  ></cx-configurator-show-options>
+</div>
+
 <cx-configurator-show-more
   *ngIf="attribute.description"
   [text]="attribute.description"

feature-libs/product-configurator/rulebased/components/attribute/header/configurator-attribute-header.component.spec.ts

@@ -34,6 +34,15 @@ class MockConfiguratorShowMoreComponent {
   @Input() productName: string;
 }
 
+@Component({
+  selector: 'cx-configurator-show-options',
+  template: '',
+  standalone: false,
+})
+class MockConfiguratorShowOptionsComponent {
+  @Input() attributeComponentContext: ConfiguratorAttributeCompositionContext;
+}
+
 export class MockIconFontLoaderService {
   useSvg(_iconType: ICON_TYPE) {
     return false;
@@ -131,6 +140,7 @@ describe('ConfigAttributeHeaderComponent', () => {
       declarations: [
         ConfiguratorAttributeHeaderComponent,
         MockConfiguratorShowMoreComponent,
+        MockConfiguratorShowOptionsComponent,
       ],
       providers: [
         { provide: IconLoaderService, useClass: MockIconFontLoaderService },
@@ -184,6 +194,7 @@ describe('ConfigAttributeHeaderComponent', () => {
     component.groupId = 'testGroup';
     component.attribute.required = false;
     component.attribute.incomplete = true;
+    component.attribute.domainOnDemand = false;
     component.attribute.uiType = Configurator.UiType.RADIOBUTTON;
     component.groupType = Configurator.GroupType.ATTRIBUTE_GROUP;
     component.isNavigationToGroupEnabled = true;
@@ -320,6 +331,23 @@ describe('ConfigAttributeHeaderComponent', () => {
       );
     });
 
+    it('should not render "Show Options" button when domainOnDemand is false', () => {
+      CommonConfiguratorTestUtilsService.expectElementNotPresent(
+        expect,
+        htmlElem,
+        'cx-configurator-show-options'
+      );
+    });
+    it('should render "Show Options" button when domainOnDemand is true', () => {
+      component.attribute.domainOnDemand = true;
+      fixture.detectChanges();
+      CommonConfiguratorTestUtilsService.expectElementPresent(
+        expect,
+        htmlElem,
+        'cx-configurator-show-options'
+      );
+    });
+
     it('should render a label as required', () => {
       component.attribute.required = true;
       fixture.detectChanges();

feature-libs/product-configurator/rulebased/components/attribute/header/configurator-attribute-header.module.ts

@@ -13,6 +13,7 @@ import { IconModule } from '@spartacus/storefront';
 import { ConfiguratorAttributeCompositionConfig } from '../composition/configurator-attribute-composition.config';
 import { ConfiguratorAttributeHeaderComponent } from './configurator-attribute-header.component';
 import { ConfiguratorShowMoreModule } from '../../show-more/configurator-show-more.module';
+import { ConfiguratorShowOptionsModule } from '../show-options/configurator-show-options.module';
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { ConfiguratorShowMoreModule } from '../../show-more/configurator-show-mo
     IconModule,
     NgSelectModule,
     ConfiguratorShowMoreModule,
+    ConfiguratorShowOptionsModule,
   ],
   providers: [
     provideDefaultConfig(<ConfiguratorAttributeCompositionConfig>{

feature-libs/product-configurator/rulebased/components/attribute/index.ts

@@ -10,6 +10,7 @@ export * from './header/index';
 export * from './price-change/index';
 export * from './product-card/index';
 export * from './quantity/index';
+export * from './show-options/index';
 export * from './types/base/index';
 export * from './types/checkbox-list/index';
 export * from './types/checkbox/index';

feature-libs/product-configurator/rulebased/components/attribute/show-options/configurator-show-options.component.html

@@ -0,0 +1,17 @@
+<ng-container>
+  <button
+    class="btn btn-tertiary"
+    tabindex="0"
+    (click)="showOptions()"
+    [attr.title]="'configurator.button.showOptions' | cxTranslate"
+    [attr.aria-label]="
+      'configurator.a11y.showOptionsForAttribute'
+        | cxTranslate: { attribute: attributeComponentContext.attribute.label }
+    "
+    [attr.aria-describedby]="
+      'cx-configurator--label--' + attributeComponentContext.attribute.name
+    "
+  >
+    {{ 'configurator.button.showOptions' | cxTranslate }}
+  </button>
+</ng-container>

feature-libs/product-configurator/rulebased/components/attribute/show-options/configurator-show-options.component.spec.ts

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfiguratorShowOptionsComponent } from './configurator-show-options.component';
+import { I18nTestingModule } from '@spartacus/core';
+import { ConfiguratorCommonsService } from '../../../core/facade/configurator-commons.service';
+import { CommonConfiguratorTestUtilsService } from '../../../../common/testing/common-configurator-test-utils.service';
+import { ConfiguratorStorefrontUtilsService } from '../../service/configurator-storefront-utils.service';
+import { By } from '@angular/platform-browser';
+import { getTestScheduler } from 'jasmine-marbles';
+import { Observable, of } from 'rxjs';
+import { ConfiguratorTestUtils } from '../../../testing/configurator-test-utils';
+
+class MockConfiguratorCommonsService {
+  readAttributeDomain() {}
+  isConfigurationLoading(): Observable<boolean> {
+    return of(false);
+  }
+}
+
+class MockConfiguratorStorefrontUtilsService {
+  focusFirstActiveElement() {}
+  createAttributeUiKey() {}
+}
+
+describe('ConfiguratorShowOptionsComponent', () => {
+  let component: ConfiguratorShowOptionsComponent;
+  let fixture: ComponentFixture<ConfiguratorShowOptionsComponent>;
+  let htmlElem: HTMLElement;
+  let configuratorCommonsService: ConfiguratorCommonsService;
+  let configuratorStorefrontUtilsService: ConfiguratorStorefrontUtilsService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ConfiguratorShowOptionsComponent],
+      imports: [I18nTestingModule],
+      providers: [
+        {
+          provide: ConfiguratorCommonsService,
+          useClass: MockConfiguratorCommonsService,
+        },
+        {
+          provide: ConfiguratorStorefrontUtilsService,
+          useClass: MockConfiguratorStorefrontUtilsService,
+        },
+      ],
+    }).compileComponents();
+
+    configuratorCommonsService = TestBed.inject(ConfiguratorCommonsService);
+    configuratorStorefrontUtilsService = TestBed.inject(
+      ConfiguratorStorefrontUtilsService
+    );
+    spyOn(configuratorCommonsService, 'readAttributeDomain');
+    fixture = TestBed.createComponent(ConfiguratorShowOptionsComponent);
+    component = fixture.componentInstance;
+    htmlElem = fixture.nativeElement;
+
+    component.attributeComponentContext =
+      ConfiguratorTestUtils.getAttributeContext();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render "Show Options" button', () => {
+    CommonConfiguratorTestUtilsService.expectElementPresent(
+      expect,
+      htmlElem,
+      '.btn'
+    );
+  });
+
+  it('should delegate to configurator commons service when clicking "Show Options" button', () => {
+    fixture.debugElement.query(By.css('.btn')).nativeElement.click();
+    expect(configuratorCommonsService.readAttributeDomain).toHaveBeenCalledWith(
+      component.attributeComponentContext.owner,
+      component.attributeComponentContext.group,
+      component.attributeComponentContext.attribute
+    );
+  });
+
+  describe('focusFirstValue', () => {
+    it('should call focusFirstActiveElement of configurator storefront utils service ', () => {
+      //we need to run the test in a test scheduler
+      //because of the delay() in method focusFirstValue
+      getTestScheduler().run(({ cold, flush }) => {
+        const configurationLoading = cold('-a-b-c', {
+          a: false,
+          b: true,
+          c: false,
+        });
+        spyOn(
+          configuratorCommonsService,
+          'isConfigurationLoading'
+        ).and.returnValue(configurationLoading);
+        spyOn(
+          configuratorStorefrontUtilsService,
+          'focusFirstActiveElement'
+        ).and.callThrough();
+        component['focusFirstValue']();
+        flush();
+        expect(
+          configuratorStorefrontUtilsService.focusFirstActiveElement
+        ).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

feature-libs/product-configurator/rulebased/components/attribute/show-options/configurator-show-options.component.ts

@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component, Input } from '@angular/core';
+import { delay, take, distinctUntilChanged, skip } from 'rxjs/operators';
+import { ConfiguratorCommonsService } from '../../../core/facade/configurator-commons.service';
+import { ConfiguratorAttributeCompositionContext } from '../composition/configurator-attribute-composition.model';
+import { ConfiguratorStorefrontUtilsService } from '../../service/configurator-storefront-utils.service';
+
+@Component({
+  selector: 'cx-configurator-show-options',
+  templateUrl: './configurator-show-options.component.html',
+  standalone: false,
+})
+export class ConfiguratorShowOptionsComponent {
+  @Input() attributeComponentContext: ConfiguratorAttributeCompositionContext;
+
+  constructor(
+    protected configuratorCommonsService: ConfiguratorCommonsService,
+    protected configuratorStorefrontUtilsService: ConfiguratorStorefrontUtilsService
+  ) {}
+
+  /**
+   * fires a request to read the attribute domain,
+   * so that all options of the attribute become visible on the UI
+   */
+  showOptions() {
+    this.focusFirstValue();
+    this.configuratorCommonsService.readAttributeDomain(
+      this.attributeComponentContext.owner,
+      this.attributeComponentContext.group,
+      this.attributeComponentContext.attribute
+    );
+  }
+
+  protected focusFirstValue(): void {
+    this.configuratorCommonsService
+      .isConfigurationLoading(this.attributeComponentContext.owner)
+      .pipe(
+        distinctUntilChanged(),
+        skip(2), // first isLoading=false as it is called before the readAttributeDomain, second is Loading=true, third is loading=false
+        take(1),
+        delay(0) // we need to consider the re-rendering of the page
+      )
+      .subscribe(() =>
+        this.configuratorStorefrontUtilsService.focusFirstActiveElement(
+          '#' +
+            this.configuratorStorefrontUtilsService.createAttributeUiKey(
+              'group-attribute',
+              this.attributeComponentContext.attribute.name
+            )
+        )
+      );
+  }
+}

feature-libs/product-configurator/rulebased/components/attribute/show-options/configurator-show-options.module.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { I18nModule } from '@spartacus/core';
+import { ConfiguratorShowOptionsComponent } from './configurator-show-options.component';
+
+@NgModule({
+  imports: [CommonModule, I18nModule],
+  providers: [],
+  declarations: [ConfiguratorShowOptionsComponent],
+  exports: [ConfiguratorShowOptionsComponent],
+})
+export class ConfiguratorShowOptionsModule {}

feature-libs/product-configurator/rulebased/components/attribute/show-options/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './configurator-show-options.component';
+export * from './configurator-show-options.module';

feature-libs/product-configurator/rulebased/components/group/configurator-group.component.html

@@ -6,6 +6,7 @@
   </ng-container>
   <div
     class="cx-group-attribute"
+    id="{{ createAttributeUiKey('group-attribute', attribute.name) }}"
     [class.cx-hidden]="!attribute.visible"
     *ngFor="
       let attribute of group.attributes;