@configura/web-api 1.6.0-iotest.4 → 1.6.1-alpha.2

package/dist/CfgProduct.d.ts

@@ -1,14 +1,15 @@
 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;
-    committed: boolean;
 };
 export declare type CfgProductSettings = {
     /**
@@ -19,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.
@@ -49,6 +57,10 @@ export declare type CfgPrice = {
     currency: string;
     fractionDigits: number;
 };
+export declare type RevalidateResult = {
+    wasAborted: boolean;
+    requestDidValidate: boolean;
+};
 /**
  * This class is meant to only be used through CfgProduct. It should never be instantiated on its
  * own. Normally the internal state of this class should never be directly modified. CfgProduct is
@@ -64,12 +76,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;
@@ -82,6 +92,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;
@@ -91,6 +102,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;
@@ -113,15 +127,18 @@ export declare class _CfgProductInternal {
      * It does not affect the visibility of anything in the 3D view at all.
      */
     get visible(): boolean;
-    _notifyAllOfChange: (bubbleMode: CfgProductBubbleMode, committed: boolean) => Promise<void>;
+    _notifyAllOfChange: (bubbleMode: CfgProductBubbleMode) => Promise<void>;
     /** Called when a child (additional product or the configuration) has changed. */
     private _childHasChanged;
     /** Called by child to tell its parent that it has changed. */
-    _additionalProductHasChanged: (freshRef: CfgProduct, bubbleMode: CfgProductBubbleMode, committed: boolean) => Promise<void>;
+    _additionalProductHasChanged: (freshRef: CfgProduct, bubbleMode: CfgProductBubbleMode) => Promise<void>;
     /** Called by the configuration to tell its parent that it has changed. */
-    _configurationHasChanged: (freshRef: CfgProductConfiguration, bubbleMode: ProductConfigurationBubbleMode, committed: boolean) => Promise<void>;
+    _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;
     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. */
@@ -132,7 +149,7 @@ export declare class _CfgProductInternal {
      * product in isolation. The validation result is applied on the configuration. Then additional
      * products are synced (unloaded, loaded etc.) Finally the changes bubble up the tree.
      */
-    _revalidate: (bubbleMode: CfgProductBubbleMode, productLoader: ProductLoader, committed: boolean) => Promise<boolean>;
+    _revalidate: (bubbleMode: CfgProductBubbleMode, productLoader: ProductLoader) => Promise<RevalidateResult>;
     /**
      * Based on this configuration find what additional products should be shown and not, unload
      * (i.e. destroy) those that should no longer be shown, load the new ones.
@@ -144,7 +161,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, 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();
@@ -76,31 +76,31 @@ export class _CfgProductInternal {
                 additionalProduct.destroy();
             }
         };
-        this._notifyAllOfChange = (bubbleMode, committed) => __awaiter(this, void 0, void 0, function* () {
+        this._notifyAllOfChange = (bubbleMode) => __awaiter(this, void 0, void 0, function* () {
             if (bubbleMode === CfgProductBubbleMode.Stop) {
                 return;
             }
             const parent = this.parent;
             const freshRef = CfgProduct._makeNewRefFrom(this);
-            this.changeObservable.notifyAll({ freshRef, committed });
+            this.changeObservable.notifyAll({ freshRef });
             if (parent !== undefined) {
                 yield parent._additionalProductHasChanged(freshRef, bubbleMode === CfgProductBubbleMode.OneLevel
                     ? CfgProductBubbleMode.Stop
-                    : bubbleMode, committed);
+                    : bubbleMode);
             }
         });
         /** Called when a child (additional product or the configuration) has changed. */
-        this._childHasChanged = (bubbleMode, committed) => __awaiter(this, void 0, void 0, function* () {
+        this._childHasChanged = (bubbleMode) => __awaiter(this, void 0, void 0, function* () {
             if (bubbleMode === CfgProductBubbleMode.ToRootAndBubbleSelected &&
                 this.optional &&
                 !this.selected) {
                 yield this.setSelected(true, bubbleMode);
                 return;
             }
-            yield this._notifyAllOfChange(bubbleMode, committed);
+            yield this._notifyAllOfChange(bubbleMode);
         });
         /** Called by child to tell its parent that it has changed. */
-        this._additionalProductHasChanged = (freshRef, bubbleMode, committed) => __awaiter(this, void 0, void 0, function* () {
+        this._additionalProductHasChanged = (freshRef, bubbleMode) => __awaiter(this, void 0, void 0, function* () {
             const i = this.additionalProducts.findIndex((a) => a.isBackedBySame(freshRef));
             if (i !== -1) {
                 // Child additional product might not be found. This probably means that propagate
@@ -110,31 +110,34 @@ export class _CfgProductInternal {
                 // C no longer is part of the tree. Odd, but fully permitted.
                 this.additionalProducts[i] = freshRef;
             }
-            yield this._childHasChanged(bubbleMode, committed);
+            yield this._childHasChanged(bubbleMode);
         });
         /** Called by the configuration to tell its parent that it has changed. */
-        this._configurationHasChanged = (freshRef, bubbleMode, committed) => __awaiter(this, void 0, void 0, function* () {
+        this._configurationHasChanged = (freshRef, bubbleMode) => __awaiter(this, void 0, void 0, function* () {
             this._configuration = freshRef;
             switch (bubbleMode) {
                 case ProductConfigurationBubbleMode.ValidateAndBubbleSelected:
                     // The revalidate call will continue the bubble
-                    yield this._revalidate(CfgProductBubbleMode.ToRootAndBubbleSelected, this._productLoaderRaw, committed);
+                    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, committed);
+                    yield this._revalidate(CfgProductBubbleMode.ToRoot, this._productLoaderRaw);
                     return;
                 case ProductConfigurationBubbleMode.ToParentProduct:
                     // Do not continue bubble as we have reached the parent CfgProduct
                     return;
                 case ProductConfigurationBubbleMode.OneLevel:
-                    yield this._childHasChanged(CfgProductBubbleMode.OneLevel, committed);
+                    yield this._childHasChanged(CfgProductBubbleMode.OneLevel);
                     return;
                 case ProductConfigurationBubbleMode.Stop:
-                    yield this._childHasChanged(CfgProductBubbleMode.Stop, committed);
+                    yield this._childHasChanged(CfgProductBubbleMode.Stop);
                     return;
                 case ProductConfigurationBubbleMode.ToRoot:
-                    yield this._childHasChanged(CfgProductBubbleMode.ToRoot, committed);
+                    yield this._childHasChanged(CfgProductBubbleMode.ToRoot);
                     return;
             }
         });
@@ -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,28 +182,34 @@ 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;
             }
             if (doValidate && configurationChange) {
-                yield this._revalidate(CfgProductBubbleMode.ToRoot, productLoaderForGroupedLoad, true);
+                yield this._revalidate(CfgProductBubbleMode.ToRoot, productLoaderForGroupedLoad);
             }
             else if (change) {
                 // As setApiSelection is done recursively each level takes care of its own notifications
                 // so we only need to bubble one level to notify this and swap out the reference in the
                 // parent.
-                yield this._notifyAllOfChange(CfgProductBubbleMode.OneLevel, true);
+                yield this._notifyAllOfChange(CfgProductBubbleMode.OneLevel);
             }
             return change;
         });
@@ -212,10 +235,10 @@ export class _CfgProductInternal {
             const configurationChange = yield this.configuration._internal.tryMatchSelection(other.configuration._internal, descriptionMatch, false);
             if (configurationChange) {
                 change = true;
-                yield this._revalidate(CfgProductBubbleMode.ToRootAndBubbleSelected, productLoaderForGroupedLoad, true);
+                yield this._revalidate(CfgProductBubbleMode.ToRootAndBubbleSelected, productLoaderForGroupedLoad);
             }
             else if (change) {
-                yield this._notifyAllOfChange(CfgProductBubbleMode.ToRootAndBubbleSelected, true);
+                yield this._notifyAllOfChange(CfgProductBubbleMode.ToRootAndBubbleSelected);
             }
             const thisAdditionalProducts = this.additionalProducts;
             const otherAdditionalProducts = other.additionalProducts;
@@ -264,12 +287,13 @@ export class _CfgProductInternal {
          * product in isolation. The validation result is applied on the configuration. Then additional
          * products are synced (unloaded, loaded etc.) Finally the changes bubble up the tree.
          */
-        this._revalidate = (bubbleMode, productLoader, committed) => __awaiter(this, void 0, void 0, function* () {
+        this._revalidate = (bubbleMode, productLoader) => __awaiter(this, void 0, void 0, function* () {
             const { _configuration: configuration } = this;
             const token = this.loadingObservable.startChildLoading();
             this._revalidateInProgressToken = token;
             try {
                 const response = yield productLoader.postValidate(Object.assign(Object.assign({ lang: this.lang }, correctDefaultsOnCatalogueParams(this.catId)), { partNumber: this.partNumber }), { selOptions: configuration.getApiSelection() });
+                const requestDidValidate = response.validated;
                 // The revalidateInProgressToken is used to know if some other revalidate
                 // call has happened after this call, thereby making this call obsolete.
                 // This is a bit crude in that it does not actually cancel previous validate
@@ -278,7 +302,7 @@ export class _CfgProductInternal {
                 // of all, the heavy work happens on the server, and that work will not be
                 // cancelled even if we would cancel the call.
                 if (this._revalidateInProgressToken !== token) {
-                    return false;
+                    return { wasAborted: true, requestDidValidate };
                 }
                 // After a successful validate-call we will always assume there
                 // is a change. It would be possible to compare relevant parts
@@ -286,7 +310,7 @@ export class _CfgProductInternal {
                 // syndAndLoad, however the code comparing productData would be fragile
                 // and likely to break if new data-fields were added.
                 if (this._destroyed) {
-                    return false;
+                    return { wasAborted: true, requestDidValidate };
                 }
                 const { productData, rootFeatureRefs } = response;
                 const pricesUpdated = !comparePricesObjects(this.prices, productData.partsData.prices);
@@ -301,10 +325,10 @@ export class _CfgProductInternal {
                 yield configuration._internal.setApiSelection(productData.partsData.selOptions || [], false);
                 yield this._syncAndLoadAdditionalProducts(productLoader);
                 if (this._destroyed) {
-                    return false;
+                    return { wasAborted: true, requestDidValidate };
                 }
-                yield this._notifyAllOfChange(bubbleMode, committed);
-                return true;
+                yield this._notifyAllOfChange(bubbleMode);
+                return { wasAborted: false, requestDidValidate };
             }
             catch (e) {
                 throw e;
@@ -322,7 +346,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 +361,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 +386,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) {
@@ -368,8 +404,8 @@ export class _CfgProductInternal {
                 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 +416,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 +427,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 +461,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) {
@@ -461,7 +517,7 @@ export class _CfgProductInternal {
                 return false;
             }
             this._selected = v;
-            yield this._notifyAllOfChange(bubbleMode, true);
+            yield this._notifyAllOfChange(bubbleMode);
             return true;
         });
     }
@@ -494,14 +550,20 @@ export class _CfgProductInternal {
             ? this.visibleIfAdditionalProduct
             : this.visibleIfMainProduct;
     }
+    get syncGroupHandler() {
+        return this.root._syncGroupHandler;
+    }
 }
 _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 syncGroupHandler = root === undefined
+        ? SyncGroupsHandler.make(settings.syncGroupsApplyMode, loadingObservable)
+        : undefined;
     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) => {
@@ -510,9 +572,11 @@ lang, catId, partNumber, settings, optional, loadingObservable, refKey, refDescr
             // 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);
+        }, 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;
 });
 export class CfgProduct {
@@ -563,12 +627,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

@@ -1,11 +1,5 @@
 export * from "./CatalogueAPI.js";
 export * from "./CfgProduct.js";
-export * from "./io/CfgHistoryManager.js";
-export * from "./io/CfgHistoryToCameraConfConnector.js";
-export * from "./io/CfgHistoryToProdConfConnector.js";
-export * from "./io/CfgWindowMessageManager.js";
-export * from "./io/CfgWindowMessageToCameraConfConnector.js";
-export * from "./io/CfgWindowMessageToProdConfConnector.js";
 export * from "./material/CfgMaterialMapping.js";
 export * from "./material/CfgMtrlApplication.js";
 export * from "./material/CfgMtrlApplicationSource.js";
@@ -17,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

@@ -1,11 +1,5 @@
 export * from "./CatalogueAPI.js";
 export * from "./CfgProduct.js";
-export * from "./io/CfgHistoryManager.js";
-export * from "./io/CfgHistoryToCameraConfConnector.js";
-export * from "./io/CfgHistoryToProdConfConnector.js";
-export * from "./io/CfgWindowMessageManager.js";
-export * from "./io/CfgWindowMessageToCameraConfConnector.js";
-export * from "./io/CfgWindowMessageToProdConfConnector.js";
 export * from "./material/CfgMaterialMapping.js";
 export * from "./material/CfgMtrlApplication.js";
 export * from "./material/CfgMtrlApplicationSource.js";
@@ -17,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,5 +1,5 @@
 import { LengthUnit, Observable, SingleArgCallback } from "@configura/web-utilities";
-import { Feature, SelectedOption } from "../CatalogueAPI.js";
+import { Feature, SelectedOption, SyncGroup } from "../CatalogueAPI.js";
 import { CfgProduct, _CfgProductInternal } from "../CfgProduct.js";
 import { CfgMtrlApplication } from "../material/CfgMtrlApplication.js";
 import { CfgOption, ProductConfigurationBubbleMode, _CfgOptionInternal } from "./CfgOption.js";
@@ -49,6 +49,7 @@ export declare class _CfgFeatureInternal {
     get isUseNumericValue(): boolean;
     get numericValue(): number | undefined;
     setNumericValue: (val: number) => Promise<boolean>;
+    get syncGroup(): SyncGroup | undefined;
     get description(): string;
     /**
      * The MeasureParam class is re-used for different purposes. In Features it is used