@configura/web-api 1.6.1-alpha.7 → 1.6.2

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier"
+
+		// TODO: Type-checking rules require a proper tsconfig-file to work,
+		//       pointed at by the parserOption.project setting.
+		//
+		//"plugin:@typescript-eslint/recommended-requiring-type-checking"
+	]
+	//"rules": { "@typescript-eslint/no-floating-promises": "error" }
+	//"parserOptions": {
+	//	"project": "./tsconfig.json"
+	//}
+}

package/dist/CatalogueAPI.d.ts

@@ -66,14 +66,6 @@ export interface CodeRange {
     maxValue: number;
     increment?: number;
 }
-/** ConnectorRef */
-export interface ConnectorRef {
-    code: string;
-    connectRule: string;
-    visible: boolean;
-    anchor?: MeasureParam;
-    transform: Transform;
-}
 /** ErrorResponse */
 export interface ErrorResponse {
     error: string;
@@ -349,7 +341,6 @@ export interface ProductData {
     navImage?: string;
     sku: string;
     measurements?: Array<Measurement>;
-    connectorRefs?: Array<ConnectorRef>;
     tags?: Array<{
         [index: string]: string;
     }>;
@@ -491,8 +482,11 @@ export declare class APIError<T> extends Error {
     parsed?: T;
     status?: number;
 }
+declare type FetchFunc = (input: RequestInfo, init?: RequestInit) => Promise<Response>;
 export declare class CatalogueAPI {
+    private readonly _fetch;
     auth: AuthorizeResponse | undefined;
+    constructor(_fetch?: FetchFunc);
     private _alternativeReferer;
     _saveAlternativeReferer(): void;
     hasFeature(feature: string): boolean;
@@ -510,4 +504,5 @@ export declare class CatalogueAPI {
     getRenderById(params: GetRenderByIdParams): Promise<RenderResponse>;
     postSessionTokenRefresh(): Promise<RefreshSessionTokenResponse>;
 }
+export {};
 //# sourceMappingURL=CatalogueAPI.d.ts.map

package/dist/CatalogueAPI.js

@@ -1,5 +1,5 @@
-// WARNING: This file was auto generated by the code in web-rnd/tygen.
-// Do not commit manual changes to this file.
+// TODO: Fix the linter issue in Tygen and regenerate this file.
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -35,6 +35,9 @@ export const syncGroupMethodsNames = ["pull", "push", "twoWay"];
 export class APIError extends Error {
 }
 export class CatalogueAPI {
+    constructor(_fetch = window.fetch.bind(window)) {
+        this._fetch = _fetch;
+    }
     // For internal use
     _saveAlternativeReferer() {
         if (typeof document === "undefined") {
@@ -59,7 +62,7 @@ export class CatalogueAPI {
                 options.headers["Content-Type"] = "application/json;charset=utf-8";
             }
             try {
-                response = yield fetch(url, options);
+                response = yield this._fetch(url, options);
                 body = yield response.text();
                 const parsed = JSON.parse(body);
                 if ("error" in parsed) {

package/dist/CfgProduct.d.ts

@@ -1,10 +1,12 @@
 import { AggregatedLoadingObservable, LengthUnit, Observable, SingleArgCallback } from "@configura/web-utilities";
-import { AdditionalProductConfiguration, CatalogueParams, MeasureParam, MtrlApplication, Prices, Transform } from "./CatalogueAPI.js";
+import { AdditionalProductConfiguration, AdditionalProductRef, CatalogueParams, MeasureParam, MtrlApplication, Prices, Transform } from "./CatalogueAPI.js";
 import { CfgMeasureDefinition } from "./CfgMeasure.js";
 import { _CfgFeatureInternal } from "./productConfiguration/CfgFeature.js";
 import { ProductConfigurationBubbleMode } from "./productConfiguration/CfgOption.js";
 import { CfgProductConfiguration } from "./productConfiguration/CfgProductConfiguration.js";
 import { ProductLoader } from "./productLoader.js";
+import { SyncGroupsApplyMode } from "./syncGroups/SyncGroupsApplyMode.js";
+import { SyncGroupsHandler } from "./syncGroups/SyncGroupsHandler.js";
 import { CfgProductData, RootNodeSource } from "./utilitiesCatalogueData.js";
 export declare type CfgProductChangeNotification = {
     freshRef: CfgProduct;
@@ -18,12 +20,19 @@ export declare type CfgProductSettings = {
      */
     strictSelectOneSelectionCount: boolean;
     /**
-     * Activating this will make setAPI throw an error if the number of actually selected options
-     * on Features (excluding Group) are not exactly equal to the number of options passed in.
-     * Note: This check is not always reliable for Options with multiple Features each, which we
-     * believe is a rare use case.
+     * Controls if SyncGroups are applied Faster or Stricter.
+     *
+     * Fast - Tries to minimize the number of validates calls to the AI lowering the response times
+     * for selecting options. Might not always give the expected result for complex products.
+     *
+     * Strict - Apply the SyncGroups rules in a stricter fashion to be as close to CET as possible,
+     * which might result in longer response times and more validation calls to the API when
+     * selecting options.
+     *
+     * The SDK will default to Strict, but we recommend that you try out Fast since cases where the
+     * results differ should be rare in most real uses cases and the speedup can be quite large.
      */
-    strictSetApiSelectionMatch: boolean;
+    syncGroupsApplyMode: SyncGroupsApplyMode | undefined;
 };
 /**
  * This enum is used internally in the SDK and is not expected by be used directly by integrators.
@@ -63,12 +72,10 @@ export declare class _CfgProductInternal {
     private readonly _rawUnit;
     private _rawProductData;
     readonly loadingObservable: AggregatedLoadingObservable;
-    readonly refKey: string | undefined;
-    readonly refDescription: string | undefined;
     readonly parent: _CfgProductInternal | undefined;
-    readonly transform: Transform | undefined;
-    anchor: MeasureParam | undefined;
-    static make: (productLoaderRaw: ProductLoader, productLoaderForGroupedLoad: ProductLoader | undefined, lang: string, catId: CatalogueParams, partNumber: string, settings: CfgProductSettings, optional: boolean, loadingObservable: AggregatedLoadingObservable, refKey: string | undefined, refDescription: string | undefined, parent: _CfgProductInternal | undefined, root: _CfgProductInternal | undefined, transform: Transform | undefined, anchor: MeasureParam | undefined) => Promise<_CfgProductInternal>;
+    private _additionalProductRef;
+    private readonly _syncGroupHandler;
+    static make: (productLoaderRaw: ProductLoader, productLoaderForGroupedLoad: ProductLoader | undefined, lang: string, catId: CatalogueParams, partNumber: string, settings: CfgProductSettings, optional: boolean, loadingObservable: AggregatedLoadingObservable, parent: _CfgProductInternal | undefined, root: _CfgProductInternal | undefined, additionalProductRef: AdditionalProductRef | undefined) => Promise<_CfgProductInternal>;
     private constructor();
     readonly root: _CfgProductInternal;
     private _destroyed;
@@ -81,6 +88,7 @@ export declare class _CfgProductInternal {
     readonly isAdditionalProduct: boolean;
     clone(parent?: _CfgProductInternal, root?: _CfgProductInternal): Promise<_CfgProductInternal>;
     destroy: () => void;
+    _updateAdditionalProdRef(p: AdditionalProductRef): void;
     get description(): string | undefined;
     get rootNodeSources(): RootNodeSource[] | undefined;
     get mtrlApplications(): MtrlApplication[] | undefined;
@@ -90,6 +98,9 @@ export declare class _CfgProductInternal {
     private _measureDefinitions;
     get measureDefinitions(): CfgMeasureDefinition[];
     private _unit;
+    get refKey(): string | undefined;
+    get transform(): Transform | undefined;
+    get anchor(): MeasureParam | undefined;
     /** @throws an error if the actual unit sent by the server was not a LengthUnit */
     get unit(): LengthUnit;
     get aggregatedPrice(): CfgPrice;
@@ -121,6 +132,14 @@ export declare class _CfgProductInternal {
     _configurationHasChanged: (freshRef: CfgProductConfiguration, bubbleMode: ProductConfigurationBubbleMode) => Promise<void>;
     getApiSelection: () => AdditionalProductConfiguration;
     setApiSelection: (s: AdditionalProductConfiguration, doValidate: boolean, productLoaderForGroupedLoad?: ProductLoader | undefined) => Promise<boolean>;
+    copyFrom: (source: _CfgProductInternal, doValidate: boolean, productLoaderForGroupedLoad?: ProductLoader | undefined) => Promise<boolean>;
+    private _setApiSelectionWithOtherProduct;
+    get syncGroupHandler(): SyncGroupsHandler | undefined;
+    get syncGroupsVerboseLogging(): boolean;
+    /**
+     * Set to true to get verbose sync state changes logged to the console.
+     */
+    set syncGroupsVerboseLogging(v: boolean);
     structureCompare: (other: _CfgProductInternal, strictOrder?: boolean, descriptionMatch?: boolean) => boolean;
     tryMatchSelection: (other: _CfgProductInternal, descriptionMatch?: boolean, productLoaderForGroupedLoad?: ProductLoader | undefined) => Promise<boolean>;
     /** Only features in selected options and selected additional products. */
@@ -143,7 +162,7 @@ export declare class CfgProduct {
     static make(productLoader: ProductLoader, lang: string, catId: CatalogueParams, partNumber: string, settings?: Partial<CfgProductSettings>): Promise<CfgProduct>;
     /**
      * Makes an object wrapping the passed object. This is not a clone method, it is a method to
-     * make a new outer reference. Like a shallow copy./ We use this to help frameworks that are
+     * make a new outer reference. Like a shallow copy. We use this to help frameworks that are
      * build around using equals to detect change.
      */
     static _makeNewRefFrom(source: _CfgProductInternal): CfgProduct;

package/dist/CfgProduct.js

@@ -7,18 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { AggregatedLoadingObservable, compareArrays, count, Observable, toLengthUnit, } from "@configura/web-utilities";
+import { AggregatedLoadingObservable, assert, assertDefined, augmentErrorMessage, compareArrays, count, Observable, toLengthUnit, } from "@configura/web-utilities";
 import { CfgMeasureDefinition } from "./CfgMeasure.js";
 import { ProductConfigurationBubbleMode } from "./productConfiguration/CfgOption.js";
 import { CfgProductConfiguration } from "./productConfiguration/CfgProductConfiguration.js";
 import { collectAdditionalProductRefs } from "./productConfiguration/utilitiesProductConfiguration.js";
 import { wrapWithCache } from "./productLoader.js";
-import { comparePricesObjects, correctDefaultsOnCatalogueParams, makeProductKey, } from "./utilitiesCatalogueData.js";
+import { SyncGroupsHandler } from "./syncGroups/SyncGroupsHandler.js";
+import { comparePricesObjects, correctDefaultsOnCatalogueParams, isSameCatalogueParams, isSameProductRef, makeProductKey, } from "./utilitiesCatalogueData.js";
 function completeSettings(incompleteSettings) {
-    var _a, _b;
+    var _a;
     return {
         strictSelectOneSelectionCount: (_a = incompleteSettings === null || incompleteSettings === void 0 ? void 0 : incompleteSettings.strictSelectOneSelectionCount) !== null && _a !== void 0 ? _a : false,
-        strictSetApiSelectionMatch: (_b = incompleteSettings === null || incompleteSettings === void 0 ? void 0 : incompleteSettings.strictSetApiSelectionMatch) !== null && _b !== void 0 ? _b : false,
+        syncGroupsApplyMode: incompleteSettings === null || incompleteSettings === void 0 ? void 0 : incompleteSettings.syncGroupsApplyMode,
     };
 }
 /**
@@ -50,7 +51,8 @@ function isDescriptionMatch(l, r) {
  * the class that should be used and interacted with.
  */
 export class _CfgProductInternal {
-    constructor(initSuccess, initFail, _productLoaderRaw, lang, catId, partNumber, settings, optional, selected, rootFeatureRefs, allRawFeatures, uuid, _rawUnit, _rawProductData, apiSelection, loadingObservable, refKey, refDescription, parent, root, transform, anchor) {
+    constructor(initSuccess, initFail, _productLoaderRaw, lang, catId, partNumber, settings, optional, selected, rootFeatureRefs, allRawFeatures, uuid, _rawUnit, _rawProductData, apiSelection, loadingObservable, parent, root, _additionalProductRef, _syncGroupHandler) {
+        var _a;
         this._productLoaderRaw = _productLoaderRaw;
         this.lang = lang;
         this.catId = catId;
@@ -60,11 +62,9 @@ export class _CfgProductInternal {
         this._rawUnit = _rawUnit;
         this._rawProductData = _rawProductData;
         this.loadingObservable = loadingObservable;
-        this.refKey = refKey;
-        this.refDescription = refDescription;
         this.parent = parent;
-        this.transform = transform;
-        this.anchor = anchor;
+        this._additionalProductRef = _additionalProductRef;
+        this._syncGroupHandler = _syncGroupHandler;
         this._destroyed = false;
         this.additionalProducts = [];
         this.changeObservable = new Observable();
@@ -120,6 +120,9 @@ export class _CfgProductInternal {
                     // The revalidate call will continue the bubble
                     yield this._revalidate(CfgProductBubbleMode.ToRootAndBubbleSelected, this._productLoaderRaw);
                     return;
+                case ProductConfigurationBubbleMode.BubbleSelected:
+                    yield this._childHasChanged(CfgProductBubbleMode.ToRootAndBubbleSelected);
+                    return;
                 case ProductConfigurationBubbleMode.Validate:
                     // The revalidate call will continue the bubble
                     yield this._revalidate(CfgProductBubbleMode.ToRoot, this._productLoaderRaw);
@@ -145,13 +148,27 @@ export class _CfgProductInternal {
             additionalProducts: this.additionalProducts.map((additionalProduct) => additionalProduct.getApiSelection()),
         });
         this.setApiSelection = (s, doValidate, productLoaderForGroupedLoad) => __awaiter(this, void 0, void 0, function* () {
+            return this._setApiSelectionWithOtherProduct(s, doValidate, productLoaderForGroupedLoad, undefined);
+        });
+        this.copyFrom = (source, doValidate, productLoaderForGroupedLoad) => __awaiter(this, void 0, void 0, function* () {
+            return yield this._setApiSelectionWithOtherProduct(source.getApiSelection(), doValidate, productLoaderForGroupedLoad, source);
+        });
+        this._setApiSelectionWithOtherProduct = (s, doValidate, productLoaderForGroupedLoad, sourceProduct) => __awaiter(this, void 0, void 0, function* () {
             // Wrap with cache will make getProduct for this function call use the same server call
             // for the same product with the same params. Used for getProduct (when a new additional
             // product is loaded) and postValidate.
             productLoaderForGroupedLoad =
                 productLoaderForGroupedLoad || wrapWithCache(this._productLoaderRaw);
+            let change = false;
+            if (sourceProduct !== undefined) {
+                this._rawProductData = sourceProduct.rawProductData;
+                this.configuration._internal.populateFeatures(sourceProduct.configuration.rootFeatureRefs);
+                change = true; // We can not know if this is an actual change, so we assume it is
+            }
             const configurationChange = yield this.configuration._internal.setApiSelection(s.selOptions, false);
-            let change = configurationChange;
+            if (configurationChange) {
+                change = true;
+            }
             if (this.optional) {
                 if (yield this.setSelected(s.selected !== false, CfgProductBubbleMode.Stop)) {
                     change = true;
@@ -165,17 +182,23 @@ export class _CfgProductInternal {
             if (apiSelectionAdditionalProductsCount !== additionalProductsCount) {
                 throw new Error(`Additional products are not same length. This product: "${this.key}". This product additional products count: ${additionalProductsCount}. Passed apiSelection additional products count: ${apiSelectionAdditionalProductsCount}`);
             }
-            if ((yield Promise.all(apiSelectionAdditionalProducts.map((apiSelectionChild) => {
-                const refKey = apiSelectionChild.refKey;
-                if (refKey === undefined) {
-                    throw new Error("Additional product api configurations must have refKey.");
-                }
+            const sourceProductAdditionalProducts = sourceProduct === null || sourceProduct === void 0 ? void 0 : sourceProduct.additionalProducts;
+            assert(!sourceProductAdditionalProducts ||
+                additionalProductsCount === sourceProductAdditionalProducts.length, `Passed sourceProduct does not have the same number of additional products as this.`);
+            if ((yield Promise.all(apiSelectionAdditionalProducts.map((apiSelectionAdditionalProduct, index) => {
+                var _a;
+                const refKey = apiSelectionAdditionalProduct.refKey;
+                assertDefined(refKey, "Additional product api configurations must have refKey.");
                 const i = additionalProducts.findIndex((a) => refKey === a.refKey);
-                if (i === -1) {
-                    throw new Error(`Additional product not found. This product: "${this.key}". refKey of not found additional product: "${refKey}"`);
+                assert(i !== -1, `Additional product not found. This product: "${this.key}". refKey of not found additional product: "${refKey}"`);
+                let sourceProductAdditionalProduct = undefined;
+                if (sourceProductAdditionalProducts !== undefined) {
+                    sourceProductAdditionalProduct =
+                        (_a = sourceProductAdditionalProducts.find((a) => refKey === a.refKey)) === null || _a === void 0 ? void 0 : _a._internal;
+                    assertDefined(sourceProductAdditionalProduct, "Additional product not found in sourceProduct");
                 }
                 const additionalProduct = additionalProducts.splice(i, 1)[0]; // Splicing like this is okay because this is done synchronous. The setCon. is what is async.
-                return additionalProduct._internal.setApiSelection(apiSelectionChild, doValidate, productLoaderForGroupedLoad);
+                return additionalProduct._internal._setApiSelectionWithOtherProduct(apiSelectionAdditionalProduct, doValidate, productLoaderForGroupedLoad, sourceProductAdditionalProduct);
             }))).some((b) => b)) {
                 change = true;
             }
@@ -307,7 +330,7 @@ export class _CfgProductInternal {
                 return true;
             }
             catch (e) {
-                throw e;
+                throw augmentErrorMessage(e, "Validate product configuration request failure");
             }
             finally {
                 this.loadingObservable.stopChildLoading(token);
@@ -322,7 +345,14 @@ export class _CfgProductInternal {
             const additionalProductRefs = [
                 ...(productData.additionalProductRefs || []),
                 ...collectAdditionalProductRefs(configuration),
-            ].map((prodRef, originalIndex) => ({
+            ]
+                .reduce((a, c) => {
+                if (a.every((p) => !isSameProductRef(p, c))) {
+                    a.push(c);
+                }
+                return a;
+            }, [])
+                .map((prodRef, originalIndex) => ({
                 prodRef,
                 originalIndex,
             }));
@@ -330,14 +360,19 @@ export class _CfgProductInternal {
             let i = currentAdditionalProducts.length;
             while (i--) {
                 const currentAdditionalProduct = currentAdditionalProducts[i];
-                const refKey = currentAdditionalProduct.refKey;
-                const j = additionalProductRefs.findIndex((p) => p.prodRef.refKey === refKey);
+                const j = additionalProductRefs.findIndex((p) => {
+                    const prodRef = p.prodRef;
+                    return (prodRef.refKey === currentAdditionalProduct.refKey &&
+                        prodRef.partNumber === currentAdditionalProduct.partNumber &&
+                        isSameCatalogueParams(prodRef.catId, currentAdditionalProduct.catId));
+                });
                 if (j === -1) {
                     currentAdditionalProduct.destroy();
                     currentAdditionalProducts.splice(i, 1);
                     change = true;
                 }
                 else {
+                    currentAdditionalProduct._internal._updateAdditionalProdRef(additionalProductRefs[j].prodRef);
                     additionalProductRefs.splice(j, 1);
                 }
             }
@@ -350,7 +385,7 @@ export class _CfgProductInternal {
                     const additionalProductRef = p.prodRef;
                     return {
                         originalIndex: p.originalIndex,
-                        product: CfgProduct._makeNewRefFrom(yield _CfgProductInternal.make(productLoaderRaw, productLoaderForGroupedLoad, lang, additionalProductRef.catId, additionalProductRef.partNumber, this.settings, additionalProductRef.optional === true, this.loadingObservable, additionalProductRef.refKey, additionalProductRef.refDescription, this, this.root, additionalProductRef.transform, additionalProductRef.anchor)),
+                        product: CfgProduct._makeNewRefFrom(yield _CfgProductInternal.make(productLoaderRaw, productLoaderForGroupedLoad, lang, additionalProductRef.catId, additionalProductRef.partNumber, this.settings, additionalProductRef.optional === true, this.loadingObservable, this, this.root, additionalProductRef)),
                     };
                 }))()));
                 if (this._destroyed) {
@@ -361,15 +396,12 @@ export class _CfgProductInternal {
                 }
                 return change;
             }
-            catch (e) {
-                throw e;
-            }
             finally {
                 this.loadingObservable.stopChildLoading(token);
             }
         });
-        this.root = root || this;
-        this.key = makeProductKey(catId, refKey || partNumber);
+        this.root = root !== null && root !== void 0 ? root : this;
+        this.key = makeProductKey(catId, (_a = _additionalProductRef === null || _additionalProductRef === void 0 ? void 0 : _additionalProductRef.refKey) !== null && _a !== void 0 ? _a : partNumber);
         this._selected = optional ? selected : undefined;
         this.isAdditionalProduct = parent !== undefined;
         this._configuration = CfgProductConfiguration.make(initSuccess, initFail, rootFeatureRefs, allRawFeatures, apiSelection, this, this.root);
@@ -380,9 +412,10 @@ export class _CfgProductInternal {
     clone(parent, root) {
         return __awaiter(this, void 0, void 0, function* () {
             const product = yield new Promise((initSuccess, initFail) => {
+                var _a;
                 const p = new _CfgProductInternal(() => {
                     initSuccess(p);
-                }, initFail, this._productLoaderRaw, this.lang, this.catId, this.partNumber, this.settings, this.optional, this.selected, this._configuration.rootFeatureRefs, this._configuration.allRawFeatures, this.uuid, this._rawUnit, this._rawProductData, this.configuration.getApiSelection(), new AggregatedLoadingObservable(), this.refKey, this.refDescription, parent, root, this.transform, this.anchor);
+                }, initFail, this._productLoaderRaw, this.lang, this.catId, this.partNumber, this.settings, this.optional, this.selected, this._configuration.rootFeatureRefs, this._configuration.allRawFeatures, this.uuid, this._rawUnit, this._rawProductData, this.configuration.getApiSelection(), new AggregatedLoadingObservable(), parent, root, this._additionalProductRef, (_a = this._syncGroupHandler) === null || _a === void 0 ? void 0 : _a.clone());
             });
             for (const additionalProduct of this.additionalProducts) {
                 product.additionalProducts.push(CfgProduct._makeNewRefFrom(yield additionalProduct._internal.clone(product, root || product)));
@@ -390,8 +423,15 @@ export class _CfgProductInternal {
             return product;
         });
     }
+    _updateAdditionalProdRef(p) {
+        this._additionalProductRef = p;
+        if (p.optional !== this.optional) {
+            this._selected = p.optional ? false : undefined;
+        }
+    }
     get description() {
-        return this.refDescription || this._rawProductData.description;
+        var _a, _b;
+        return (_b = (_a = this._additionalProductRef) === null || _a === void 0 ? void 0 : _a.refDescription) !== null && _b !== void 0 ? _b : this._rawProductData.description;
     }
     get rootNodeSources() {
         return this._rawProductData.models;
@@ -417,6 +457,18 @@ export class _CfgProductInternal {
         }
         return this._measureDefinitions;
     }
+    get refKey() {
+        var _a;
+        return (_a = this._additionalProductRef) === null || _a === void 0 ? void 0 : _a.refKey;
+    }
+    get transform() {
+        var _a;
+        return (_a = this._additionalProductRef) === null || _a === void 0 ? void 0 : _a.transform;
+    }
+    get anchor() {
+        var _a;
+        return (_a = this._additionalProductRef) === null || _a === void 0 ? void 0 : _a.anchor;
+    }
     /** @throws an error if the actual unit sent by the server was not a LengthUnit */
     get unit() {
         if (this._unit === undefined) {
@@ -494,26 +546,53 @@ export class _CfgProductInternal {
             ? this.visibleIfAdditionalProduct
             : this.visibleIfMainProduct;
     }
+    get syncGroupHandler() {
+        return this.root._syncGroupHandler;
+    }
+    get syncGroupsVerboseLogging() {
+        var _a, _b;
+        return (_b = (_a = this.syncGroupHandler) === null || _a === void 0 ? void 0 : _a.verboseLogging) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Set to true to get verbose sync state changes logged to the console.
+     */
+    set syncGroupsVerboseLogging(v) {
+        const syncGroupHandler = this.syncGroupHandler;
+        if (syncGroupHandler === undefined) {
+            throw new Error("No syncGroupHandler, so can not change log verbosity");
+        }
+        syncGroupHandler.verboseLogging = v;
+    }
 }
 _CfgProductInternal.make = (productLoaderRaw, productLoaderForGroupedLoad, // Used when instantiating the current product
-lang, catId, partNumber, settings, optional, loadingObservable, refKey, refDescription, parent, root, transform, anchor) => __awaiter(void 0, void 0, void 0, function* () {
+lang, catId, partNumber, settings, optional, loadingObservable, parent, root, additionalProductRef) => __awaiter(void 0, void 0, void 0, function* () {
     // Wrap with cache will make getProduct for this function call use the same server call
     // for the same product with the same params. Not retained for future calls, only used
     // at this initial load.
     productLoaderForGroupedLoad =
         productLoaderForGroupedLoad || wrapWithCache(productLoaderRaw);
-    const productResponse = yield productLoaderForGroupedLoad.getProduct(Object.assign(Object.assign({ lang }, correctDefaultsOnCatalogueParams(catId)), { partNumber }));
-    const { productData, rootFeatureRefs, features: allRawFeatures, uuid, unit, } = productResponse;
-    const product = yield new Promise((initSuccess, initFail) => {
-        const p = new _CfgProductInternal(() => {
-            // We absolutely do not want anyone to assign to this._configuration. So we want that field private.
-            // But we can not set the api selection synchronously. And the product configuration needs "this". So we use this callback.
-            // Feel free to find a nicer more readable solution :)
-            initSuccess(p);
-        }, initFail, productLoaderRaw, lang, catId, partNumber, settings, optional, !optional, rootFeatureRefs, allRawFeatures, uuid, unit, productData, productData.partsData.selOptions || [], loadingObservable, refKey, refDescription, parent, root, transform, anchor);
-    });
-    yield product._syncAndLoadAdditionalProducts(productLoaderForGroupedLoad);
-    return product;
+    const syncGroupHandler = root === undefined
+        ? SyncGroupsHandler.make(settings.syncGroupsApplyMode, loadingObservable)
+        : undefined;
+    try {
+        const productResponse = yield productLoaderForGroupedLoad.getProduct(Object.assign(Object.assign({ lang }, correctDefaultsOnCatalogueParams(catId)), { partNumber }));
+        const { productData, rootFeatureRefs, features: allRawFeatures, uuid, unit, } = productResponse;
+        const product = yield new Promise((initSuccess, initFail) => {
+            const p = new _CfgProductInternal(() => {
+                // We absolutely do not want anyone to assign to this._configuration. So we want that field private.
+                // But we can not set the api selection synchronously. And the product configuration needs "this". So we use this callback.
+                // Feel free to find a nicer more readable solution :)
+                initSuccess(p);
+            }, initFail, productLoaderRaw, lang, catId, partNumber, settings, optional, !optional, rootFeatureRefs, allRawFeatures, uuid, unit, productData, productData.partsData.selOptions || [], loadingObservable, parent, root, additionalProductRef, syncGroupHandler);
+        });
+        yield product._syncAndLoadAdditionalProducts(productLoaderForGroupedLoad);
+        // Product is guaranteed to be root
+        yield (syncGroupHandler === null || syncGroupHandler === void 0 ? void 0 : syncGroupHandler.init(product, productLoaderForGroupedLoad));
+        return product;
+    }
+    catch (e) {
+        throw augmentErrorMessage(e, "Load product request failure");
+    }
 });
 export class CfgProduct {
     constructor(_internal) {
@@ -563,12 +642,12 @@ export class CfgProduct {
     }
     static make(productLoader, lang, catId, partNumber, settings) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this._makeNewRefFrom(yield _CfgProductInternal.make(productLoader, undefined, lang, catId, partNumber, completeSettings(settings), false, new AggregatedLoadingObservable(), undefined, undefined, undefined, undefined, undefined, undefined));
+            return this._makeNewRefFrom(yield _CfgProductInternal.make(productLoader, undefined, lang, catId, partNumber, completeSettings(settings), false, new AggregatedLoadingObservable(), undefined, undefined, undefined));
         });
     }
     /**
      * Makes an object wrapping the passed object. This is not a clone method, it is a method to
-     * make a new outer reference. Like a shallow copy./ We use this to help frameworks that are
+     * make a new outer reference. Like a shallow copy. We use this to help frameworks that are
      * build around using equals to detect change.
      */
     static _makeNewRefFrom(source) {

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export * from "./productConfiguration/CfgProductConfiguration.js";
 export * from "./productConfiguration/filters.js";
 export * from "./productConfiguration/productParamsGenerator.js";
 export * from "./productLoader.js";
+export * from "./syncGroups/SyncGroupsApplyMode.js";
+export * from "./syncGroups/SyncGroupsHandler.js";
 export * from "./tasks/formats.js";
 export * from "./tasks/TaskHandler.js";
 export * from "./utilitiesCatalogueData.js";

package/dist/index.js

@@ -11,6 +11,8 @@ export * from "./productConfiguration/CfgProductConfiguration.js";
 export * from "./productConfiguration/filters.js";
 export * from "./productConfiguration/productParamsGenerator.js";
 export * from "./productLoader.js";
+export * from "./syncGroups/SyncGroupsApplyMode.js";
+export * from "./syncGroups/SyncGroupsHandler.js";
 export * from "./tasks/formats.js";
 export * from "./tasks/TaskHandler.js";
 export * from "./utilitiesCatalogueData.js";

package/dist/productConfiguration/CfgFeature.d.ts

@@ -1,7 +1,8 @@
 import { LengthUnit, Observable, SingleArgCallback } from "@configura/web-utilities";
-import { Feature, SelectedOption } from "../CatalogueAPI.js";
+import { Feature, SelectedOption, SyncGroup, SyncGroupMethods } from "../CatalogueAPI.js";
 import { CfgProduct, _CfgProductInternal } from "../CfgProduct.js";
 import { CfgMtrlApplication } from "../material/CfgMtrlApplication.js";
+import { SyncCode } from "../syncGroups/SyncGroupsHandler.js";
 import { CfgOption, ProductConfigurationBubbleMode, _CfgOptionInternal } from "./CfgOption.js";
 import { _CfgProductConfigurationInternal } from "./CfgProductConfiguration.js";
 export declare enum SelectionType {
@@ -50,6 +51,14 @@ export declare class _CfgFeatureInternal {
     get numericValue(): number | undefined;
     setNumericValue: (val: number) => Promise<boolean>;
     get description(): string;
+    get syncGroup(): SyncGroup | undefined;
+    /**
+     * @return one of the following, in order:
+     * - undefined if the Feature lacks a syncGroup.
+     * - false if the syncGroup doesn't fulfill the optional mustSupport requirement.
+     * - syncCode from the syncGroup.
+     */
+    getSyncCode(mustSupport?: SyncGroupMethods): undefined | false | SyncCode;
     /**
      * The MeasureParam class is re-used for different purposes. In Features it is used
      * to indicate which stretch measures inside Models shall be affected by this state
@@ -100,8 +109,9 @@ export declare class _CfgFeatureInternal {
     structureCompare: (other: _CfgFeatureInternal, strictOrder?: boolean, descriptionMatch?: boolean) => boolean;
     tryMatchSelection: (other: _CfgFeatureInternal, descriptionMatch?: boolean) => Promise<boolean>;
     /**
-     * Normally this is used through methods on CfgFeature and CfgOption. Use this
-     * internal version if you need to control the bubbleMode.
+     * Normally this is used through methods on CfgFeature and CfgOption. Use this internal version
+     * if you need to control the bubbleMode.
+     *
      * Using a validate bubbleMode will cause validation calls to the server.
      */
     selectOption: (optionInternal: _CfgOptionInternal, on: boolean, bubbleMode: ProductConfigurationBubbleMode) => Promise<boolean>;