@configura/web-api 1.6.1-alpha.1 → 1.6.1-alpha.2

package/dist/CfgProduct.d.ts

@@ -1,5 +1,5 @@
 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";
@@ -19,13 +19,6 @@ export declare type CfgProductSettings = {
      * Activating this will make setApi throw an Error if more or less than one is selected.
      */
     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.
-     */
-    strictSetApiSelectionMatch: boolean;
     /**
      * Controls if SyncGroups are applied Faster or Stricter.
      *
@@ -83,13 +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;
+    private _additionalProductRef;
     private readonly _syncGroupHandler;
-    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>;
+    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;
@@ -102,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;
@@ -111,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;
@@ -142,7 +136,7 @@ export declare class _CfgProductInternal {
     _configurationHasChanged: (freshRef: CfgProductConfiguration, bubbleMode: ProductConfigurationBubbleMode) => Promise<void>;
     getApiSelection: () => AdditionalProductConfiguration;
     setApiSelection: (s: AdditionalProductConfiguration, doValidate: boolean, productLoaderForGroupedLoad?: ProductLoader | undefined) => Promise<boolean>;
-    copyFrom: (otherProduct: _CfgProductInternal, 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;

package/dist/CfgProduct.js

@@ -14,12 +14,11 @@ import { CfgProductConfiguration } from "./productConfiguration/CfgProductConfig
 import { collectAdditionalProductRefs } from "./productConfiguration/utilitiesProductConfiguration.js";
 import { wrapWithCache } from "./productLoader.js";
 import { SyncGroupsHandler } from "./syncGroups/SyncGroupsHandler.js";
-import { comparePricesObjects, correctDefaultsOnCatalogueParams, isSameProductRef, makeProductKey, } from "./utilitiesCatalogueData.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,
     };
 }
@@ -52,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, _syncGroupHandler) {
+    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;
@@ -62,11 +62,8 @@ 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 = [];
@@ -153,8 +150,8 @@ export class _CfgProductInternal {
         this.setApiSelection = (s, doValidate, productLoaderForGroupedLoad) => __awaiter(this, void 0, void 0, function* () {
             return this._setApiSelectionWithOtherProduct(s, doValidate, productLoaderForGroupedLoad, undefined);
         });
-        this.copyFrom = (otherProduct, doValidate, productLoaderForGroupedLoad) => __awaiter(this, void 0, void 0, function* () {
-            return yield this._setApiSelectionWithOtherProduct(otherProduct.getApiSelection(), doValidate, productLoaderForGroupedLoad, otherProduct);
+        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
@@ -364,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);
                 }
             }
@@ -384,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) {
@@ -403,7 +405,7 @@ export class _CfgProductInternal {
             }
         });
         this.root = root !== null && root !== void 0 ? root : this;
-        this.key = makeProductKey(catId, refKey || partNumber);
+        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);
@@ -417,7 +419,7 @@ export class _CfgProductInternal {
                 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, (_a = this._syncGroupHandler) === null || _a === void 0 ? void 0 : _a.clone());
+                }, 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)));
@@ -425,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;
@@ -452,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) {
@@ -534,13 +555,15 @@ export class _CfgProductInternal {
     }
 }
 _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) : undefined;
+    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) => {
@@ -549,7 +572,7 @@ 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, syncGroupHandler);
+        }, 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
@@ -604,7 +627,7 @@ 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));
         });
     }
     /**

package/dist/productConfiguration/CfgFeature.js

@@ -12,7 +12,6 @@ import { CfgProduct } from "../CfgProduct.js";
 import { CfgMtrlApplication } from "../material/CfgMtrlApplication.js";
 import { CfgMtrlApplicationSource } from "../material/CfgMtrlApplicationSource.js";
 import { wrapWithCache } from "../productLoader.js";
-import { SyncGroupsPathHelper } from "../syncGroups/SyncGroupsPathHelper.js";
 import { CfgOption, ProductConfigurationBubbleMode } from "./CfgOption.js";
 import { _CfgProductConfigurationInternal } from "./CfgProductConfiguration.js";
 import { getMtrlPreview } from "./utilitiesProductConfiguration.js";
@@ -190,18 +189,6 @@ export class _CfgFeatureInternal {
                         console.warn(wrongCountWarning);
                     }
                 }
-                if (!isGroup) {
-                    const apiSelectionCount = Object.keys(apiOptionSelectionMap).length;
-                    if (selectionCount !== apiSelectionCount) {
-                        const wrongCountWarning = `All provided Options are expected to be selected. Feature key: "${this.key}". Expected: ${apiSelectionCount} Actual: ${selectionCount}`;
-                        if (this.rootProduct.settings.strictSetApiSelectionMatch) {
-                            throw new Error(wrongCountWarning);
-                        }
-                        else {
-                            console.warn(wrongCountWarning);
-                        }
-                    }
-                }
             }
             if (change) {
                 if (isAllOptionsAffectedByAnySelection) {
@@ -313,7 +300,7 @@ export class _CfgFeatureInternal {
                 const product = this.rootProduct;
                 const syncGroupHandler = product.syncGroupHandler;
                 assertDefined(syncGroupHandler, `Sync group handler is required for bubble mode ${ProductConfigurationBubbleMode.ValidateAndBubbleSelectedAndApplySyncGroups}`);
-                return yield syncGroupHandler.selectOption(product, SyncGroupsPathHelper.getPath(optionInternal), on, wrapWithCache(product._productLoaderRaw));
+                return yield syncGroupHandler.selectOption(product, optionInternal, on, wrapWithCache(product._productLoaderRaw));
             }
             if (!on) {
                 if (this.selectionType === SelectionType.Group) {

package/dist/productConfiguration/CfgOption.d.ts

@@ -79,6 +79,7 @@ export declare class _CfgOptionInternal {
     get unit(): LengthUnit;
     get description(): string;
     get selected(): boolean;
+    get selectedChangeInProgress(): boolean;
     get ancestorsSelected(): boolean;
     get mtrlApplications(): CfgMtrlApplication[];
     get thumbnail(): string | undefined;
@@ -124,6 +125,14 @@ export declare class CfgOption {
     get unit(): LengthUnit;
     get description(): string;
     get selected(): boolean;
+    /**
+     * Selection state is in progress to be changed. This can be used in GUI
+     * to display the state as transitioning, or as already changed.
+     * If selectedChangeInProgress and:
+     * selected is true, it means that this is about to get unselected
+     * selected is false, it means that this is about to get selected
+     */
+    get selectedChangeInProgress(): boolean;
     /** Are all ancestors up to the CfgProductConfiguration selected? Includes self. */
     get ancestorsSelected(): boolean;
     /**

package/dist/productConfiguration/CfgOption.js

@@ -256,6 +256,20 @@ export class _CfgOptionInternal {
     get selected() {
         return this.parent.isSelected(this);
     }
+    get selectedChangeInProgress() {
+        const syncGroupHandler = this.rootProduct.syncGroupHandler;
+        if (syncGroupHandler === undefined) {
+            return false;
+        }
+        const inProgressOption = syncGroupHandler.pending;
+        if (inProgressOption === this) {
+            return true;
+        }
+        if (!(this.selected && this.parent.selectionType === SelectionType.SelectOne)) {
+            return false;
+        }
+        return this.parent.options.some((o) => o._internal === inProgressOption);
+    }
     get ancestorsSelected() {
         return this.selected && this.parent.ancestorsSelected;
     }
@@ -383,6 +397,16 @@ export class CfgOption {
     get selected() {
         return this._internal.selected;
     }
+    /**
+     * Selection state is in progress to be changed. This can be used in GUI
+     * to display the state as transitioning, or as already changed.
+     * If selectedChangeInProgress and:
+     * selected is true, it means that this is about to get unselected
+     * selected is false, it means that this is about to get selected
+     */
+    get selectedChangeInProgress() {
+        return this._internal.selectedChangeInProgress;
+    }
     /** Are all ancestors up to the CfgProductConfiguration selected? Includes self. */
     get ancestorsSelected() {
         return this._internal.ancestorsSelected;

package/dist/productConfiguration/filters.d.ts

@@ -12,5 +12,5 @@ export declare function applyProductRefFilters(filters: Filters<ProductRefParams
  * @param prdRefsFilter Products not in this array are removed
  * @param showEmpty Shall empty levels be shown?
  */
-export declare function cloneFilterSortLevels(levels: Level[], prdRefsFilter: ProductRef[], showEmpty: boolean): Level[] | undefined;
+export declare function cloneFilterSortLevels(levels: Level[], prdRefsFilter: ProductRef[], showEmpty: boolean, doSort?: boolean): Level[] | undefined;
 //# sourceMappingURL=filters.d.ts.map

package/dist/productConfiguration/filters.js

@@ -34,13 +34,13 @@ export function applyProductRefFilters(filters, productRefs) {
  * @param prdRefsFilter Products not in this array are removed
  * @param showEmpty Shall empty levels be shown?
  */
-export function cloneFilterSortLevels(levels, prdRefsFilter, showEmpty) {
+export function cloneFilterSortLevels(levels, prdRefsFilter, showEmpty, doSort = true) {
     const newLevels = [];
     for (const level of levels) {
         // recursively fetch the next levels
         let nextLevels;
         if (level.lvls !== undefined) {
-            nextLevels = cloneFilterSortLevels(level.lvls, prdRefsFilter, showEmpty);
+            nextLevels = cloneFilterSortLevels(level.lvls, prdRefsFilter, showEmpty, doSort);
         }
         // filter out products
         let newPrdRefs;
@@ -63,5 +63,8 @@ export function cloneFilterSortLevels(levels, prdRefsFilter, showEmpty) {
             newLevels.push(newLevel);
         }
     }
-    return newLevels.sort((l1, l2) => l1.description.toLocaleLowerCase().localeCompare(l2.description.toLocaleLowerCase()));
+    if (doSort) {
+        return newLevels.sort((l1, l2) => l1.description.toLocaleLowerCase().localeCompare(l2.description.toLocaleLowerCase()));
+    }
+    return newLevels;
 }

package/dist/syncGroups/SyncGroupsApplier.js

@@ -88,7 +88,7 @@ class SyncStateOnto {
                 // All settled, continue to pullPhase
                 return yield OntoSyncState.rootProduct(transaction);
             }
-            if (transaction.isAborted) {
+            if (transaction.isClosed) {
                 // We could exit in more places when the transaction has been aborted,
                 // but as revalidate is really the only thing that could be expensive /
                 // time consuming we only check here.
@@ -106,7 +106,7 @@ class SyncStateOnto {
             // could accumulate and what is cause and effect be hard to know.
             if (!revalidationResults.every((r) => r.requestDidValidate) ||
                 revalidationResults.every((r) => r.wasAborted)) {
-                transaction.abort();
+                transaction.close();
                 return false;
             }
             // Apply over again, to settle deeper down. Our theory is that the front of

package/dist/syncGroups/SyncGroupsHandler.d.ts

@@ -1,7 +1,8 @@
+import { AggregatedLoadingObservable } from "@configura/web-utilities";
 import { _CfgProductInternal } from "../CfgProduct.js";
+import { _CfgOptionInternal } from "../productConfiguration/CfgOption.js";
 import { ProductLoader } from "../productLoader.js";
 import { SyncGroupsApplyMode } from "./SyncGroupsApplyMode.js";
-import { CfgPath } from "./SyncGroupsPathHelper.js";
 import { SyncGroupsTransaction } from "./SyncGroupsTransaction.js";
 export declare type SyncCode = string;
 export declare type OptionCode = string;
@@ -12,9 +13,13 @@ export declare type OptionCode = string;
 export declare class SyncGroupsHandler {
     private _syncState;
     readonly updateMode: SyncGroupsApplyMode;
+    private readonly _loadingObservable;
     private _currentTransaction;
-    static make(updateMode?: SyncGroupsApplyMode): SyncGroupsHandler;
+    static make(updateMode?: SyncGroupsApplyMode, loadingObservable?: AggregatedLoadingObservable): SyncGroupsHandler;
     private constructor();
+    /**
+     * Please note that clones will use the same loadingObservable as their source
+     */
     clone(): SyncGroupsHandler;
     /**
      * Used to initially apply the sync state onto a new product so that it is "in sync"
@@ -24,8 +29,12 @@ export declare class SyncGroupsHandler {
      * Used when an Option is selected or deselected to apply all consequences of the sync groups.
      * Can cause multiple extra validation calls to the server.
      */
-    selectOption(product: _CfgProductInternal, optionPath: CfgPath, on: boolean, productLoader: ProductLoader): Promise<boolean>;
+    selectOption(product: _CfgProductInternal, option: _CfgOptionInternal, on: boolean, productLoader: ProductLoader): Promise<boolean>;
+    private _pending;
+    private setPending;
+    get pending(): _CfgOptionInternal | undefined;
     newTransaction(product: _CfgProductInternal, productLoader: ProductLoader, assumeNoStartProductState: boolean): Promise<SyncGroupsTransaction>;
+    private closeTransaction;
     applyTransaction(transaction: SyncGroupsTransaction): Promise<void>;
 }
 //# sourceMappingURL=SyncGroupsHandler.d.ts.map

package/dist/syncGroups/SyncGroupsHandler.js

@@ -7,23 +7,265 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { SelectionType } from "../productConfiguration/CfgFeature.js";
+import { ProductConfigurationBubbleMode, } from "../productConfiguration/CfgOption.js";
 import { SyncGroupsApplyMode } from "./SyncGroupsApplyMode.js";
+import { SyncGroupsPathHelper } from "./SyncGroupsPathHelper.js";
 import { SyncGroupsState } from "./SyncGroupsState.js";
 import { SyncGroupsTransaction } from "./SyncGroupsTransaction.js";
+/* SyncGroup Concepts
+ * ==================
+ *
+ * SyncGroups are a concept in Catalogues that gives the creator the option to attempt to
+ * synchronize selections between otherwise independent Features.
+ *
+ * Each Feature can optionally specify a "Sync Group Code" in the Catalogue. All features with the
+ * same sync group code is said to belong to the same Sync Group.
+ *
+ * In addition, each Feature that is part of a Sync Group should have a "Sync Mode" set which can
+ * be either "Read", "Write" or "Read and  Write". The code in the SDK refers to them as "pull",
+ * "push" and "twoWay" respectively.
+ *
+ * The current state of all the SyncGroups is stored in a SyncState. The sync state keeps track of
+ * each sync group even if no features are currently visible for that sync group code. In that way,
+ * the sync state acts like a kind of short-term memory when a user is configuring a product.
+ *
+ * The sync state is always discarded when you leave or reload a product and is thus always an
+ * empty slate when a product is loaded.
+ *
+ *
+ * Best Effort and Conflicts
+ * =========================
+ *
+ * Catalogues had been along for a long time when the Sync Group functionality was added in 2021,
+ * and as a result, it is sort of a layer on top off the normal handling of selecting Options on
+ * Features and it is applied in a "best effort"-manner.
+ *
+ * Two or more Features belonging to the same SyncGroup shows the intent that they should be
+ * synchronized, with how being controlled by their respective sync mode.
+ *
+ * However, the Catalogue format is not strict on how you define the features you want tp keep
+ * synchronized. They can for example have only partially overlapping domains (i.e. what Options
+ * can be selected) or even no overlap at all which means there is no guarantee that they can
+ * always stay in sync.
+ *
+ * Using different sync modes and bringing features into scope also adds complexity as well as
+ * power to create "creative" solutions to design problems.
+ *
+ * There is also a use case for adding a unique sync group code to single features, which signals
+ * the intent that the creator wants those features to keep their previously selected values even
+ * when they are not currently visible in the current configuration.
+ *
+ * In the end, it's up to the Catalogue creator to build the products inside their Catalogues so
+ * that his or her intentions are met without unexpected side effects.
+ *
+ *
+ * Technical Details
+ * =================
+ *
+ * Feature types
+ * -------------
+ *
+ * Features can be of three types. (Or that is the model we use in Stage, it seems to hold.)
+ *
+ * 1. SelectOne Features are like radio buttons, one Option is selected at a time.
+ * 2. SelectMany Features ("optional" in Catalogues) are like check boxes, any number of Options
+ *    are selected at a time.
+ * 3. Group Features ("multiple" in Catalogues) act like a grouping mechanism where all the Options
+ *    are permanently selected. No user interaction allowed.
+ *
+ * Group Features work like any other Feature without SyncGroups. They are just transparent.
+ *
+ * SelectOne and SelectMany have fully separated sync states. This means that there is never a sync
+ * connection between SelectOne and SelectMany Features even if they have the same Sync Group Code.
+ *
+ * In other words, SelectOne Features only sync with other SelectOne features and vice versa.
+ *
+ * On what level sync happens is different between SelectOne and SelectMany Features. For SelectOne
+ * we store an option code per SyncGroup. For SelectMany we store "On" or "Off" per option code per
+ * SyncGroup.
+ *
+ * You can say that SelectOne is synced on Feature level, and SelectMany is synced on Option level.
+ *
+ * Note that the same Feature (as in feature code) can exist in multiple places in a configuration
+ * tree. In this context, they are treated as individual Features that just happens to have an
+ * identical set of settings in the Catalogue.
+ *
+ *
+ * Transactions
+ * ------------
+ *
+ * Selecting an Option in a Feature can trigger a bunch of changes, each of them cascading into new
+ * features coming into scope and in turn changing other SyncGroups. As far as the user goes these
+ * changes is under the hood and is part of a single change triggered by the first selection.
+ *
+ * This is also how it is implemented. All the changes created by the initial selection are
+ * validated and propagated inside a single "transaction". The transaction is considered complete
+ * when the last round of changes did not trigger any new changes in the sync state.
+ *
+ * In every transaction, each SyncGroup is allowed to be updated only once for SelectOne features or
+ * once per unique option code in the case of SelectMany features. This is done to ensure that the
+ * propagated changes is guaranteed to stabilize over time and eliminates the risk of loops.
+ *
+ * Since a Feature can only have a single sync group code, this also means that a Feature will be
+ * changed at most once during a single transaction.
+ *
+ *
+ * Applying SyncGroups => Features/Options
+ * ---------------------------------------
+ *
+ * The state of the SyncGroups (as stored in the SyncState) is applied to a Feature/Option under
+ * the following conditions:
+ * A) The Feature belongs to a SyncGroup, i.e. has a Sync Group Code.
+ * B) The feature's sync mode is set to "pull" or "twoWay".
+ *
+ * ...for SelectOne:
+ * C) The SyncState has an option code for this SyncGroup.
+ * D) The option code in the SyncState for the SyncGroup is not the Option selected.
+ * E) The Feature has an Option with the right option code.
+ * F) The Feature has not previously been affected in this transaction.
+ *
+ * ...for SelectMany (done for every Option):
+ * C) The SyncState has a value (on or off) for this SyncGroup and option code.
+ * D) The Option is on when it should be off or the other way around.
+ * E) The Option has not previously been affected in this transaction.
+ *
+ * Applying the sync state typically happen when:
+ * - A user action on a Feature has changed the SyncState.
+ * - Features "comes into scope"
+ *
+ * A feature "coming into scope" refers features "appearing" during for example a Product load, a
+ * parent feature changing selected options to expose new children or an Additional Product coming
+ * into scope.
+ *
+ *
+ * Applying Features/Options => SyncGroups
+ * ---------------------------------------
+ *
+ * The Feature/Option is applied to the SyncState under the following conditions:
+ * A) The Feature belongs to a SyncGroup, i.e. has a Sync Group Code.
+ * B) The feature's sync mode is set to "push" or "twoWay".
+ *
+ * ...for SelectOne:
+ * C) The Option selected is not the option code currently in the SyncState for the SyncGroup.
+ * D) The SyncState has not been affected for this SyncGroup in this transaction.
+ * E) Any one of the below:
+ *    - A user actively selects an Option.
+ *    - There is no option code in the SyncState for this SyncGroup.
+ *    - The Feature did just come into scope, and the option code in the SyncState for this
+ *      SyncGroup is not one of the Options in the Feature. The option code is not in the Feature
+ *      Domain for this Feature that is. So, a Feature appearing which cannot take it's selection
+ *      from the SyncState will instead write it back.
+ *
+ * ...for SelectMany (for each Option):
+ * C) The SyncState has not been affected for this SyncGroup and option code in this transaction.
+ * D) Any one of the below:
+ *    - A user actively selects or deselects an Option, and the on or off status differs from what
+ *      is in the SyncState for the SyncGroup and option code.
+ *    - There is no entry for SyncGroup and option code in the SyncState and the Option is
+ *      selected. We only implicitly initialize the SyncState for "on" as there is no way to
+ *      explicitly chose what is default of in Catalogues.
+ *
+ * This typically happens when:
+ * - A user selects or deselects an option.
+ * - Features comes into scope, like at Product load, a parent feature changing selected options to
+ *   expose new children or an Additional Product coming into scope.
+ *
+ *
+ * Implementation Details
+ * ======================
+ *
+ * There are two entry points into the process. One for when a new Product is loaded, when we want
+ * to move it into a synced state. The other is when a user selects or deselects an Option.
+ *
+ * The process can be thought of as a state machine with three states or stages:
+ * A) Select/deselect Option and force to SyncState
+ * B) Apply the SyncState onto the Product
+ * C) Apply the Product onto the SyncState
+ *
+ * The entry point for a new Product is C. This makes sense as a new Product has no SyncState at
+ * all, so applying the Product onto the SyncState is good start.
+ *
+ * The entry point for user selection is A.
+ *
+ * Let's look at how we move between states starting with A.
+ *
+ * State A will apply the selection onto the Option. It will write to the SyncState. It will then
+ * transition to state B.
+ *
+ * State A is only run once for each user interaction, and not at all for Product Load.
+ *
+ * State B will apply the SyncState onto Features by recursively going through the configuration
+ * tree. Once it finds a Feature/Option which should be changed by the state it:
+ * - Checks if it can change it (it can't if the belongs to a so far uninitialized SyncGroup) and
+ *   if it can then:
+ *   - Changes the selection on the Feature.
+ *   - Add the parent Product for the Feature to a list of Products for which a validate call
+ *     must later be made.
+ *   - Stop recursing down this branch as the validation call might actually change the structure
+ *     and children in the branch.
+ *
+ * Once we have recursed the entire tree the result can be either:
+ * - There are Products to validate.
+ *   Then we do the validations, and once they are done we move back into state B. We run it again
+ *   as we did not recurse all the way down the branches that changed value. With each run, we will
+ *   get further out on the branches until finally reaching the end.
+ * - There are no Products to validate.
+ *   This means that there were no Features which we could apply the SyncState onto. We now move
+ *   into state C as the selection changes may have brought new Features into scope, Features which
+ *   might write to the SyncState.
+ *
+ * State C will apply Features onto the SyncState. It will recursively go through the configuration
+ * tree. When it's done one of two has happened:
+ * - There was a write to the SyncState.
+ *   We then move back to state B, as this change in the SyncState could open up things in B. For
+ *   example a Feature that could not pull from the SyncState before might be able to do that now.
+ * - There was no write to the SyncState.
+ *   All is calm. We are done. The settling of the SyncState vs configuration is done. Things are
+ *   as in sync as they will be. This is the exit.
+ *
+ *
+ * Side Notes
+ * ==========
+ *
+ * _CfgProductInternal, _CfgFeatureInternal and _CfgOptionInternal are used in Sets and Maps in the
+ * code. These objects are only created once for the data they represent. That is, even if a Feature
+ * goes in or out of scope the object is the same. This is not true for their wrapper classer
+ * CfgProduct, CfgFeature and CfgOption. Those are frequently replaced while running.
+ *
+ */
+/**
+ * Send to root for the passed option and any sibling which is selected, provided the Feature
+ * is SelectOne. (As that one (should only be one) can be assumed to be affected).
+ */
+function notifyOptionAndSelectedSiblings(option) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const parentFeature = option.parent;
+        if (parentFeature.selectionType === SelectionType.SelectOne) {
+            // These only need to be OneLevel, as the final is ToRoot and they share their parent.
+            yield Promise.all(option.parent.selectedOptions.map((o) => parentFeature._childHasChanged(o._internal, ProductConfigurationBubbleMode.OneLevel)));
+        }
+        yield parentFeature._childHasChanged(option, ProductConfigurationBubbleMode.ToRoot);
+    });
+}
 /**
  * Is used to apply the SyncGroups functionality on the Configuration and the other
  * way around. It also keeps the SyncState.
  */
 export class SyncGroupsHandler {
-    constructor(_syncState, updateMode) {
+    constructor(_syncState, updateMode, _loadingObservable) {
         this._syncState = _syncState;
         this.updateMode = updateMode;
+        this._loadingObservable = _loadingObservable;
     }
-    static make(updateMode = SyncGroupsApplyMode.Strict) {
-        return new SyncGroupsHandler(new SyncGroupsState(), updateMode);
+    static make(updateMode = SyncGroupsApplyMode.Strict, loadingObservable) {
+        return new SyncGroupsHandler(new SyncGroupsState(), updateMode, loadingObservable);
     }
+    /**
+     * Please note that clones will use the same loadingObservable as their source
+     */
     clone() {
-        return new SyncGroupsHandler(this._syncState.clone(), this.updateMode);
+        return new SyncGroupsHandler(this._syncState.clone(), this.updateMode, this._loadingObservable);
     }
     /**
      * Used to initially apply the sync state onto a new product so that it is "in sync"
@@ -31,41 +273,80 @@ export class SyncGroupsHandler {
     init(product, productLoader) {
         return __awaiter(this, void 0, void 0, function* () {
             const transaction = yield this.newTransaction(product, productLoader, true);
-            yield transaction.init();
-            yield this.applyTransaction(transaction);
+            try {
+                yield transaction.init();
+                yield this.applyTransaction(transaction);
+            }
+            finally {
+                this.closeTransaction(transaction);
+            }
         });
     }
     /**
      * Used when an Option is selected or deselected to apply all consequences of the sync groups.
      * Can cause multiple extra validation calls to the server.
      */
-    selectOption(product, optionPath, on, productLoader) {
+    selectOption(product, option, on, productLoader) {
         return __awaiter(this, void 0, void 0, function* () {
             //todo: should we guarantee that it will use root? Tricky...
+            yield this.setPending(option);
             const transaction = yield this.newTransaction(product, productLoader, false);
-            const change = yield transaction.selectOption(optionPath, on);
-            // We always apply. The change-result above only tells if the configuration
-            // has changed. The SyncState may also have changed.
-            yield this.applyTransaction(transaction);
-            return change;
+            try {
+                const change = yield transaction.selectOption(SyncGroupsPathHelper.getPath(option), on);
+                // We always apply. The change-result above only tells if the configuration
+                // has changed. The SyncState may also have changed.
+                yield this.applyTransaction(transaction);
+                return change;
+            }
+            finally {
+                if (this._pending === option) {
+                    yield this.setPending(undefined);
+                }
+                this.closeTransaction(transaction);
+            }
         });
     }
+    setPending(newPending) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const oldPending = this._pending;
+            this._pending = newPending;
+            if (oldPending !== undefined) {
+                yield notifyOptionAndSelectedSiblings(oldPending);
+            }
+            if (newPending !== undefined) {
+                yield notifyOptionAndSelectedSiblings(newPending);
+            }
+        });
+    }
+    get pending() {
+        return this._pending;
+    }
     newTransaction(product, productLoader, assumeNoStartProductState) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (this._currentTransaction !== undefined) {
-                this._currentTransaction.abort();
+                this.closeTransaction(this._currentTransaction);
             }
-            this._currentTransaction = yield SyncGroupsTransaction.make(this._syncState, this.updateMode, product, productLoader, assumeNoStartProductState);
-            return this._currentTransaction;
+            const transaction = yield SyncGroupsTransaction.make(this._syncState, this.updateMode, product, productLoader, assumeNoStartProductState);
+            this._currentTransaction = transaction;
+            // The transaction object is used as loading token
+            (_a = this._loadingObservable) === null || _a === void 0 ? void 0 : _a.startChildLoading(transaction);
+            return transaction;
         });
     }
+    closeTransaction(transaction) {
+        var _a;
+        transaction.close();
+        (_a = this._loadingObservable) === null || _a === void 0 ? void 0 : _a.stopChildLoading(transaction);
+    }
     applyTransaction(transaction) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (transaction.isAborted) {
+            if (transaction.isClosed) {
                 return;
             }
-            this._syncState.setFrom(transaction.syncState);
+            this._syncState.copyFrom(transaction.syncState);
             yield transaction.original.copyFrom(transaction.target, false, transaction.productLoader);
+            this.closeTransaction(transaction);
         });
     }
 }

package/dist/syncGroups/SyncGroupsState.d.ts

@@ -1,20 +1,26 @@
 import { OptionCode, SyncCode } from "./SyncGroupsHandler.js";
 /**
- * Is used to keep track of the current value of the SyncGroups. Is fully separated between
- * SelectOne and SelectMany as Features of the two types are synced separately.
+ * The SyncState is used to keep track of the current value of the SyncGroups.
+ *
+ * SelectOne and SelectMany uses fully separate states internally since the two types of features
+ * are synced separately. See SyncGroupsHandler for details.
  */
 export declare class SyncGroupsState {
     readonly _selectOne: Map<SyncCode, OptionCode>;
     readonly _selectMany: Map<SyncCode, Map<OptionCode, boolean>>;
+    /**
+     * @returns a deep copy of the SyncGroupState.
+     */
     clone(): SyncGroupsState;
     /**
-     * Replaces the current state
+     * Replaces the internal state of this SyncGroupState with a deep copy of the one in source.
+     * @returns the updated SyncGroupState.
      */
-    setFrom(other: SyncGroupsState): void;
+    copyFrom(source: SyncGroupsState): this;
     setForSelectOne(syncCode: SyncCode, optionCode: OptionCode): void;
     setForSelectMany(syncCode: SyncCode, optionCode: OptionCode, selected: boolean): void;
     getForSelectOne(syncCode: SyncCode): OptionCode | undefined;
     getForSelectMany(syncCode: SyncCode, optionCode: OptionCode): boolean | undefined;
-    logDebug(group?: string, code?: string, selected?: boolean): void;
+    log(syncCode?: SyncCode, optionCode?: OptionCode, selected?: boolean): void;
 }
 //# sourceMappingURL=SyncGroupsState.d.ts.map

package/dist/syncGroups/SyncGroupsState.js

@@ -1,46 +1,51 @@
+/** Set to true to get verbose sync state changes logged to the console. */
+const SYNCSTATE_VERBOSE = true; // TODO: Disable before merge
 /**
- * Is used to keep track of the current value of the SyncGroups. Is fully separated between
- * SelectOne and SelectMany as Features of the two types are synced separately.
+ * The SyncState is used to keep track of the current value of the SyncGroups.
+ *
+ * SelectOne and SelectMany uses fully separate states internally since the two types of features
+ * are synced separately. See SyncGroupsHandler for details.
  */
 export class SyncGroupsState {
     constructor() {
         this._selectOne = new Map();
         this._selectMany = new Map();
     }
+    /**
+     * @returns a deep copy of the SyncGroupState.
+     */
     clone() {
-        const result = new SyncGroupsState();
-        result.setFrom(this);
-        return result;
+        return new SyncGroupsState().copyFrom(this);
     }
     /**
-     * Replaces the current state
+     * Replaces the internal state of this SyncGroupState with a deep copy of the one in source.
+     * @returns the updated SyncGroupState.
      */
-    setFrom(other) {
+    copyFrom(source) {
         this._selectOne.clear();
         this._selectMany.clear();
-        for (const [k, v] of other._selectOne) {
-            this._selectOne.set(k, v);
+        let entryOne; // Ensures OptionCode is a primitive
+        for (entryOne of source._selectOne) {
+            this._selectOne.set(...entryOne);
         }
-        for (const [sourceSyncCode, sourceOptionToSelected] of other._selectMany) {
-            const targetOptionToSelected = new Map();
-            for (const [sourceOptionCode, sourceIsSelected] of sourceOptionToSelected) {
-                targetOptionToSelected.set(sourceOptionCode, sourceIsSelected);
-            }
-            this._selectMany.set(sourceSyncCode, targetOptionToSelected);
+        let entryMany;
+        for (entryMany of source._selectMany) {
+            this._selectMany.set(entryMany[0], new Map(entryMany[1]));
         }
+        return this;
     }
     setForSelectOne(syncCode, optionCode) {
         this._selectOne.set(syncCode, optionCode);
-        this.logDebug(syncCode, optionCode);
+        this.log(syncCode, optionCode);
     }
     setForSelectMany(syncCode, optionCode, selected) {
-        let forSyncCode = this._selectMany.get(syncCode);
-        if (forSyncCode === undefined) {
-            forSyncCode = new Map();
-            this._selectMany.set(syncCode, forSyncCode);
+        let entry = this._selectMany.get(syncCode);
+        if (entry === undefined) {
+            entry = new Map();
+            this._selectMany.set(syncCode, entry);
         }
-        forSyncCode.set(optionCode, selected);
-        this.logDebug(syncCode, optionCode, selected);
+        entry.set(optionCode, selected);
+        this.log(syncCode, optionCode, selected);
     }
     getForSelectOne(syncCode) {
         return this._selectOne.get(syncCode);
@@ -49,7 +54,9 @@ export class SyncGroupsState {
         var _a;
         return (_a = this._selectMany.get(syncCode)) === null || _a === void 0 ? void 0 : _a.get(optionCode);
     }
-    logDebug(group, code, selected) {
+    log(syncCode, optionCode, selected) {
+        if (!SYNCSTATE_VERBOSE)
+            return;
         const isMany = selected !== undefined;
         const selectOne = Array.from(this._selectOne.entries());
         const selectMany = Array.from(this._selectMany.entries()).reduce((a, [groupCode, optionCodeToSelected]) => {
@@ -66,43 +73,39 @@ export class SyncGroupsState {
             columnWidth = Math.max(columnWidth, e[0].length);
         });
         const padding = Array(columnWidth).join(" ");
-        const styleBold = "font-weight: bold";
-        const styleBoldThis = "color:blue; font-weight: bold";
-        const styleBoldOn = "color:green; font-weight: bold";
-        const styleBoldOff = "color:red; font-weight: bold";
-        const styleThis = "color:blue";
-        const styleOn = "color:green";
-        const styleOff = "color:red";
-        const output = [];
-        if (group === undefined) {
-            output.push("");
+        const bold = "font-weight: bold";
+        const styles = [];
+        let msg = "";
+        if (syncCode !== undefined && isMany) {
+            msg += `%c${optionCode}%c in %c${syncCode}%c set to %c${selected ? "on" : "off"}`;
+            styles.push(bold, "", bold, "", bold);
         }
-        else if (isMany) {
-            output.push(...[
-                `%c${code} %cin %c${group} %cset to %c${selected ? "on" : "off"}\n`,
-                styleBoldThis,
-                "",
-                styleBoldThis,
-                "",
-                selected ? styleBoldOn : styleBoldOff,
-            ]);
+        else if (syncCode !== undefined && !isMany) {
+            msg += `%c${syncCode}%c set to %c${optionCode}`;
+            styles.push(bold, "", bold);
         }
-        else {
-            output.push(...[`%c${group}%c set to %c${code}\n`, styleBoldThis, "", styleBoldThis]);
-        }
-        output[0] = output[0] + "%cSync State (single)";
-        output.push(styleBold);
+        msg += "\n\n%cSync State (single)";
+        styles.push(bold);
         selectOne.forEach((e) => {
-            output[0] = output[0] + `\n  %c${(padding + e[0]).slice(-columnWidth)}: ${e[1]}`;
-            output.push(!isMany && group === e[0] ? styleThis : "");
+            const match = !isMany && syncCode === e[0];
+            msg += `\n%c${match ? "*" : " "} ${(padding + e[0]).slice(-columnWidth)}: ${e[1]}`;
+            styles.push(match ? bold : "");
         });
-        output[0] = output[0] + "\n%cSync State (multi)";
-        output.push(styleBold);
+        if (selectOne.length === 0) {
+            msg += "\n%c <Empty>";
+            styles.push("");
+        }
+        msg += "\n\n%cSync State (multi)";
+        styles.push(bold);
         selectMany.forEach((e) => {
-            output[0] = output[0] + `\n  %c${(padding + e[0]).slice(-columnWidth)}: %c${e[1]}`;
-            output.push(isMany && group === e[0] ? styleThis : "");
-            output.push(e[2] === true ? styleOn : styleOff);
+            const match = isMany && syncCode === e[0] && optionCode === e[1];
+            msg += `\n%c${match ? "*" : " "} ${(padding + e[0]).slice(-columnWidth)}: ${e[2] === true ? "\u2705" : "\u274c"} ${e[1]}`;
+            styles.push(match ? bold : "");
         });
-        console.log(...output);
+        if (selectMany.length === 0) {
+            msg += "\n%c <Empty>";
+            styles.push("");
+        }
+        console.log(msg, ...styles);
     }
 }

package/dist/syncGroups/SyncGroupsTransaction.d.ts

@@ -22,21 +22,21 @@ export declare class SyncGroupsTransaction {
     static make(syncState: SyncGroupsState, updateMode: SyncGroupsApplyMode, product: _CfgProductInternal, productLoader: ProductLoader, assumeNoStartState: boolean): Promise<SyncGroupsTransaction>;
     /**
      *
-     * @param syncState A clone of the original syncState. Replaces the original syncState if nothing fails and the transaction doesn't get aborted
+     * @param syncState A clone of the original syncState. Replaces the original syncState if nothing fails and the transaction doesn't get cancelled
      * @param updateMode
      * @param productLoader
-     * @param original The product instance that this transaction will be applied on provided nothing fails and the transaction doesn't get aborted
+     * @param original The product instance that this transaction will be applied on provided nothing fails and the transaction doesn't get cancelled
      * @param target A clone of the original product used to apply the configuration changes to
      * @param initial A clone of the original product used to track what the original state was. As a safe measure we do not use originalProduct for this, as it might be changed by someone else
      */
     private constructor();
-    private _aborted;
+    private _closed;
     private affectedSelectOneFeatures;
     private affectedSelectManyOptions;
     private affectedSelectOneSyncGroups;
     private affectedSelectManySyncGroupsAndOptions;
-    get isAborted(): boolean;
-    abort(): void;
+    get isClosed(): boolean;
+    close(): void;
     init(): Promise<boolean>;
     selectOption(optionPath: CfgPath, on: boolean): Promise<boolean>;
     addSelectOneFeatureAffected(feature: _CfgFeatureInternal): void;

package/dist/syncGroups/SyncGroupsTransaction.js

@@ -20,10 +20,10 @@ import { SyncGroupsPathHelper } from "./SyncGroupsPathHelper.js";
 export class SyncGroupsTransaction {
     /**
      *
-     * @param syncState A clone of the original syncState. Replaces the original syncState if nothing fails and the transaction doesn't get aborted
+     * @param syncState A clone of the original syncState. Replaces the original syncState if nothing fails and the transaction doesn't get cancelled
      * @param updateMode
      * @param productLoader
-     * @param original The product instance that this transaction will be applied on provided nothing fails and the transaction doesn't get aborted
+     * @param original The product instance that this transaction will be applied on provided nothing fails and the transaction doesn't get cancelled
      * @param target A clone of the original product used to apply the configuration changes to
      * @param initial A clone of the original product used to track what the original state was. As a safe measure we do not use originalProduct for this, as it might be changed by someone else
      */
@@ -34,7 +34,7 @@ export class SyncGroupsTransaction {
         this.original = original;
         this.target = target;
         this.initial = initial;
-        this._aborted = false;
+        this._closed = false;
         this.affectedSelectOneFeatures = new Set();
         this.affectedSelectManyOptions = new Set();
         this.affectedSelectOneSyncGroups = new Set();
@@ -46,11 +46,11 @@ export class SyncGroupsTransaction {
             return t;
         });
     }
-    get isAborted() {
-        return this._aborted;
+    get isClosed() {
+        return this._closed;
     }
-    abort() {
-        this._aborted = true;
+    close() {
+        this._closed = true;
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/utilitiesCatalogueData.js

@@ -2,14 +2,16 @@ import { shallowCompareDictionaries } from "@configura/web-utilities";
 export const makeCatalogueKey = (cat) => `${cat.enterprise}-${cat.prdCat}-${cat.prdCatVersion}-${cat.priceList}-${cat.vendor}`;
 export const makeProductKey = (cat, pKey) => `${makeCatalogueKey(cat)}-${pKey}`;
 export const makeSelOptionsKey = (options) => options.reduce((p, option) => {
-    const { code, next } = option;
-    p += "_{" + code;
+    var _a;
+    const { code, numericValue, next } = option;
+    p += `_{${code}`;
+    p += numericValue === undefined ? "" : `_${numericValue.value}${(_a = numericValue.unit) !== null && _a !== void 0 ? _a : ""}`;
     if (next === undefined) {
         return p;
     }
     for (const key of Object.keys(next)) {
         const innerOption = next[key];
-        p += "_{" + key + "_" + makeSelOptionsKey([innerOption]) + "_}";
+        p += `_{${key}_${makeSelOptionsKey([innerOption])}_}`;
     }
     p += "_}";
     return p;
@@ -130,10 +132,10 @@ export function isSameProductRef(left, right) {
     if (left.refKey !== right.refKey) {
         return false;
     }
-    if (!isSameCatalogueParams(left.catId, right.catId)) {
+    if (left.partNumber !== right.partNumber) {
         return false;
     }
-    if (left.partNumber !== right.partNumber) {
+    if (!isSameCatalogueParams(left.catId, right.catId)) {
         return false;
     }
     if (left.refDescription !== right.refDescription) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@configura/web-api",
-	"version": "1.6.1-alpha.1",
+	"version": "1.6.1-alpha.2",
 	"license": "Apache-2.0",
 	"type": "module",
 	"main": "dist/index.js",
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@configura/web-utilities": "^1.6.1-alpha.1"
+		"@configura/web-utilities": "1.6.1-alpha.2"
 	},
-	"gitHead": "afaf1e342f0648246a1dcb6f7bc636d4d1979bec"
+	"gitHead": "e4b98f07293de3363e402a343194a9931d00732a"
 }