@configura/web-api 1.5.0-alpha.0 → 1.6.1-alpha.0

package/dist/CatalogueAPI.d.ts

@@ -80,8 +80,9 @@ export interface ErrorResponse {
     code: number;
     eventId?: string;
 }
-/** ExportFormat - The values must be the file extension used by each format. */
-export declare type ExportFormat = "fbx" | "dwg" | "cmdrw" | "cmfav" | "cmsym";
+/** ExportFormat - Format of the exported product, identical to the format's file extension. */
+export declare type ExportFormat = "glb" | "gltf" | "fbx" | "dwg" | "cmdrw" | "cmfav" | "cmsym";
+export declare const exportFormatNames: ExportFormat[];
 /** ExportRequest */
 export interface ExportRequest {
     format: ExportFormat;
@@ -102,6 +103,7 @@ export interface ExportStatus {
 }
 /** ExportStatusStatus - WIP */
 export declare type ExportStatusStatus = "pending" | "running" | "finished" | "failed";
+export declare const exportStatusStatusNames: ExportStatusStatus[];
 /** Feature */
 export interface Feature {
     code: string;
@@ -338,6 +340,8 @@ export interface ProductData {
     depth?: string;
     description?: string;
     height?: string;
+    hideIfMainProduct?: boolean;
+    hideIfAdditionalProduct?: boolean;
     length?: string;
     mtrlApplications?: Array<MtrlApplication>;
     additionalProductRefs?: Array<AdditionalProductRef>;
@@ -379,6 +383,7 @@ export interface RefreshSessionTokenResponse {
 }
 /** RenderFormat */
 export declare type RenderFormat = "jpg" | "png";
+export declare const renderFormatNames: RenderFormat[];
 /** RenderRequest */
 export interface RenderRequest {
     width: number;
@@ -402,6 +407,7 @@ export interface RenderStatus {
 }
 /** RenderStatusStatus - WIP */
 export declare type RenderStatusStatus = "pending" | "running" | "finished" | "failed";
+export declare const renderStatusStatusNames: RenderStatusStatus[];
 /** SelectedOption */
 export interface SelectedOption {
     code: string;
@@ -422,6 +428,7 @@ export interface SyncGroup {
 }
 /** SyncGroupMethods */
 export declare type SyncGroupMethods = "pull" | "push" | "twoWay";
+export declare const syncGroupMethodsNames: SyncGroupMethods[];
 /** TargetCameraArgs */
 export interface TargetCameraArgs {
     location?: Point;

package/dist/CatalogueAPI.js

@@ -9,6 +9,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+export const exportFormatNames = [
+    "glb",
+    "gltf",
+    "fbx",
+    "dwg",
+    "cmdrw",
+    "cmfav",
+    "cmsym",
+];
+export const exportStatusStatusNames = [
+    "pending",
+    "running",
+    "finished",
+    "failed",
+];
+export const renderFormatNames = ["jpg", "png"];
+export const renderStatusStatusNames = [
+    "pending",
+    "running",
+    "finished",
+    "failed",
+];
+export const syncGroupMethodsNames = ["pull", "push", "twoWay"];
 export class APIError extends Error {
 }
 export class CatalogueAPI {

package/dist/CfgMeasure.d.ts

@@ -1,4 +1,4 @@
-import { Measurement, ValueWithUnit } from "./CatalogueAPI";
+import { Measurement, ValueWithUnit } from "./CatalogueAPI.js";
 /**
  * Measures can be used to Anchor items (Models or Additional Products).
  *
@@ -19,7 +19,7 @@ export declare type CfgMeasurePriority = {
 };
 /**
  * This class strips the Measurement of things that are not actually used or relevant
- * to Stage, specifically anchoring and stretching. Measurments can also contain
+ * to Stage, specifically anchoring and stretching. Measurements can also contain
  * volume and area, but these are ignored. Here Measures are used to define defaults
  * such as its preferences when dealing with ambiguity or its default value.
  */

package/dist/CfgMeasure.js

@@ -1,6 +1,6 @@
 /**
  * This class strips the Measurement of things that are not actually used or relevant
- * to Stage, specifically anchoring and stretching. Measurments can also contain
+ * to Stage, specifically anchoring and stretching. Measurements can also contain
  * volume and area, but these are ignored. Here Measures are used to define defaults
  * such as its preferences when dealing with ambiguity or its default value.
  */

package/dist/CfgProduct.d.ts

@@ -2,9 +2,11 @@ import { AggregatedLoadingObservable, LengthUnit, Observable, SingleArgCallback
 import { AdditionalProductConfiguration, 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 { ProductConfigurationBubbleMode, _CfgOptionInternal } from "./productConfiguration/CfgOption.js";
+import { CfgProductConfiguration, _CfgProductConfigurationInternal } 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;
@@ -24,6 +26,12 @@ export declare type CfgProductSettings = {
      * believe is a rare use case.
      */
     strictSetApiSelectionMatch: boolean;
+    /**
+     * Controls if SyncGroups are applied Fast or Strict. Fast keeps the number of validate calls
+     * to the server down, Strict is closer to how CET works. We recommend you use Fast as cases
+     * where the results differ should be rare in real use cases.
+     */
+    syncGroupsApplyMode: SyncGroupsApplyMode | undefined;
 };
 /**
  * This enum is used internally in the SDK and is not expected by be used directly by integrators.
@@ -48,6 +56,12 @@ export declare type CfgPrice = {
     currency: string;
     fractionDigits: number;
 };
+export declare type CfgPathSegment = string;
+export declare type CfgPath = CfgPathSegment[];
+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
@@ -68,6 +82,7 @@ export declare class _CfgProductInternal {
     readonly parent: _CfgProductInternal | undefined;
     readonly transform: Transform | undefined;
     anchor: MeasureParam | undefined;
+    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>;
     private constructor();
     readonly root: _CfgProductInternal;
@@ -97,6 +112,21 @@ export declare class _CfgProductInternal {
     setSelected(v: boolean, bubbleMode: CfgProductBubbleMode): Promise<boolean>;
     get configuration(): CfgProductConfiguration;
     get rawProductData(): CfgProductData;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visibleIfAdditionalProduct(): boolean;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visibleIfMainProduct(): boolean;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visible(): boolean;
     _notifyAllOfChange: (bubbleMode: CfgProductBubbleMode) => Promise<void>;
     /** Called when a child (additional product or the configuration) has changed. */
     private _childHasChanged;
@@ -106,6 +136,15 @@ 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>;
+    private _setApiSelectionWithOtherProduct;
+    get syncGroupHandler(): SyncGroupsHandler | undefined;
+    get path(): CfgPath;
+    getFromPath(path: CfgPath): _CfgProductInternal | _CfgProductConfigurationInternal | _CfgFeatureInternal | _CfgOptionInternal;
+    getProductFromPath(path: CfgPath): _CfgProductInternal;
+    getProductConfigurationFromPath(path: CfgPath): _CfgProductConfigurationInternal;
+    getFeatureFromPath(path: CfgPath): _CfgFeatureInternal;
+    getOptionFromPath(path: CfgPath): _CfgOptionInternal;
     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. */
@@ -116,7 +155,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) => 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.
@@ -128,7 +167,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;
@@ -163,6 +202,13 @@ export declare class CfgProduct {
      * always true.
      */
     get selected(): boolean;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     * Visibility is affects the Configuration for this Product, but any Additional Products
+     * will not be affected.
+     */
+    get visible(): boolean;
     /**
      * Only applicable when this product is optional.
      * Setting this does not cause a validation call as toggling an optional additional product is

package/dist/CfgProduct.js

@@ -9,16 +9,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { AggregatedLoadingObservable, 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 { _CfgFeatureInternal } from "./productConfiguration/CfgFeature.js";
+import { ProductConfigurationBubbleMode, _CfgOptionInternal, } from "./productConfiguration/CfgOption.js";
+import { CfgProductConfiguration, _CfgProductConfigurationInternal, } 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, isSameProductRef, makeProductKey, } from "./utilitiesCatalogueData.js";
 function completeSettings(incompleteSettings) {
     var _a, _b;
     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 +53,7 @@ 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, refKey, refDescription, parent, root, transform, anchor, _syncGroupHandler) {
         this._productLoaderRaw = _productLoaderRaw;
         this.lang = lang;
         this.catId = catId;
@@ -65,6 +68,7 @@ export class _CfgProductInternal {
         this.parent = parent;
         this.transform = transform;
         this.anchor = anchor;
+        this._syncGroupHandler = _syncGroupHandler;
         this._destroyed = false;
         this.additionalProducts = [];
         this.changeObservable = new Observable();
@@ -120,6 +124,9 @@ export class _CfgProductInternal {
                     // The revalidate call will continue the bubble
                     yield this._revalidate(CfgProductBubbleMode.ToRootAndBubbleSelected, this._productLoaderRaw);
                     return;
+                case ProductConfigurationBubbleMode.BubbleSelected:
+                    yield this._childHasChanged(CfgProductBubbleMode.ToRootAndBubbleSelected);
+                    return;
                 case ProductConfigurationBubbleMode.Validate:
                     // The revalidate call will continue the bubble
                     yield this._revalidate(CfgProductBubbleMode.ToRoot, this._productLoaderRaw);
@@ -145,13 +152,26 @@ 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 = (otherProduct, doValidate, productLoaderForGroupedLoad) => __awaiter(this, void 0, void 0, function* () {
+            return yield this._setApiSelectionWithOtherProduct(otherProduct.getApiSelection(), doValidate, productLoaderForGroupedLoad, otherProduct);
+        });
+        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;
+                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,8 +185,14 @@ 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;
+            const sourceProductAdditionalProducts = sourceProduct === null || sourceProduct === void 0 ? void 0 : sourceProduct.additionalProducts;
+            if (sourceProductAdditionalProducts &&
+                additionalProductsCount !== sourceProductAdditionalProducts.length) {
+                throw new Error(`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;
                 if (refKey === undefined) {
                     throw new Error("Additional product api configurations must have refKey.");
                 }
@@ -174,8 +200,16 @@ export class _CfgProductInternal {
                 if (i === -1) {
                     throw new Error(`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;
+                    if (sourceProductAdditionalProduct === undefined) {
+                        throw new Error("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;
             }
@@ -270,6 +304,7 @@ export class _CfgProductInternal {
             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 +313,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 +321,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 +336,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);
-                return true;
+                return { wasAborted: false, requestDidValidate };
             }
             catch (e) {
                 throw e;
@@ -322,7 +357,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,
             }));
@@ -368,7 +410,7 @@ export class _CfgProductInternal {
                 this.loadingObservable.stopChildLoading(token);
             }
         });
-        this.root = root || this;
+        this.root = root !== null && root !== void 0 ? root : this;
         this.key = makeProductKey(catId, refKey || partNumber);
         this._selected = optional ? selected : undefined;
         this.isAdditionalProduct = parent !== undefined;
@@ -380,9 +422,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(), this.refKey, this.refDescription, parent, root, this.transform, this.anchor, (_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)));
@@ -471,6 +514,85 @@ export class _CfgProductInternal {
     get rawProductData() {
         return this._rawProductData;
     }
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visibleIfAdditionalProduct() {
+        return this.rawProductData.hideIfAdditionalProduct !== true;
+    }
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visibleIfMainProduct() {
+        return this.rawProductData.hideIfMainProduct !== true;
+    }
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
+    get visible() {
+        return this.isAdditionalProduct
+            ? this.visibleIfAdditionalProduct
+            : this.visibleIfMainProduct;
+    }
+    get syncGroupHandler() {
+        return this.root._syncGroupHandler;
+    }
+    get path() {
+        if (this.parent === undefined || this.refKey === undefined) {
+            return [];
+        }
+        return [...this.parent.path, "p", this.refKey];
+    }
+    getFromPath(path) {
+        path = path.slice();
+        const s = path.shift();
+        switch (s) {
+            case undefined:
+                return this;
+            case "p":
+                const refKey = path.shift();
+                const additionalProduct = this.additionalProducts.find((p) => p.refKey === refKey);
+                if (additionalProduct === undefined) {
+                    throw new Error(`Additional product not found "p, ${refKey}, ${path.join(", ")}"`);
+                }
+                return additionalProduct._internal.getFromPath(path);
+            case "c":
+                return this.configuration._internal.getFromPath(path);
+            default:
+                throw new Error(`Unexpected path segment ${s}`);
+        }
+    }
+    getProductFromPath(path) {
+        const p = this.getFromPath(path);
+        if (p instanceof _CfgProductInternal) {
+            return p;
+        }
+        throw new Error(`Path did not lead to a Product "${p.path.join(", ")}"`);
+    }
+    getProductConfigurationFromPath(path) {
+        const c = this.getFromPath(path);
+        if (c instanceof _CfgProductConfigurationInternal) {
+            return c;
+        }
+        throw new Error(`Path did not lead to a ProductConfiguration "${c.path.join(", ")}"`);
+    }
+    getFeatureFromPath(path) {
+        const f = this.getFromPath(path);
+        if (f instanceof _CfgFeatureInternal) {
+            return f;
+        }
+        throw new Error(`Path did not lead to a Feature "${f.path.join(", ")}"`);
+    }
+    getOptionFromPath(path) {
+        const o = this.getFromPath(path);
+        if (o instanceof _CfgOptionInternal) {
+            return o;
+        }
+        throw new Error(`Path did not lead to a Option "${o.path.join(", ")}"`);
+    }
 }
 _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* () {
@@ -479,6 +601,7 @@ lang, catId, partNumber, settings, optional, loadingObservable, refKey, refDescr
     // at this initial load.
     productLoaderForGroupedLoad =
         productLoaderForGroupedLoad || wrapWithCache(productLoaderRaw);
+    const syncGroupHandler = root === undefined ? SyncGroupsHandler.make(settings.syncGroupsApplyMode) : 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) => {
@@ -487,9 +610,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, refKey, refDescription, parent, root, transform, anchor, 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 {
@@ -545,7 +670,7 @@ export class 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) {
@@ -589,6 +714,15 @@ export class CfgProduct {
     get selected() {
         return this._internal.selected;
     }
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     * Visibility is affects the Configuration for this Product, but any Additional Products
+     * will not be affected.
+     */
+    get visible() {
+        return this._internal.visible;
+    }
     get rawProductData() {
         return this._internal.rawProductData;
     }

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/productConfiguration/CfgFeature.d.ts

@@ -1,6 +1,6 @@
 import { LengthUnit, Observable, SingleArgCallback } from "@configura/web-utilities";
-import { Feature, SelectedOption } from "../CatalogueAPI.js";
-import { CfgProduct, _CfgProductInternal } from "../CfgProduct.js";
+import { Feature, SelectedOption, SyncGroup } from "../CatalogueAPI.js";
+import { CfgPath, CfgProduct, _CfgProductInternal } from "../CfgProduct.js";
 import { CfgMtrlApplication } from "../material/CfgMtrlApplication.js";
 import { CfgOption, ProductConfigurationBubbleMode, _CfgOptionInternal } from "./CfgOption.js";
 import { _CfgProductConfigurationInternal } from "./CfgProductConfiguration.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
@@ -66,8 +67,20 @@ export declare class _CfgFeatureInternal {
      */
     private get isAllOptionsAffectedByAnySelection();
     get preview(): string | undefined;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
     get visibleIfAdditionalProduct(): boolean;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
     get visibleIfMainProduct(): boolean;
+    /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
+     */
     get visible(): boolean;
     get options(): CfgOption[];
     private _notifyAllOfChange;
@@ -83,6 +96,8 @@ export declare class _CfgFeatureInternal {
     setApiSelection: (apiOptionSelectionMap: {
         [index: string]: SelectedOption;
     } | undefined) => Promise<boolean>;
+    get path(): CfgPath;
+    getFromPath(path: CfgPath): _CfgFeatureInternal | _CfgOptionInternal;
     /** Pushes to refresh stretch. Does not cause validation. */
     pushStretch: () => Promise<boolean>;
     structureCompare: (other: _CfgFeatureInternal, strictOrder?: boolean, descriptionMatch?: boolean) => boolean;
@@ -148,6 +163,8 @@ export declare class CfgFeature {
     get preview(): string | undefined;
     get options(): CfgOption[];
     /**
+     * Please note that this relates to the visibility in the Configuration tree.
+     * It does not affect the visibility of anything in the 3D view at all.
      * Visibility is not inherited. If this is hidden the children
      * of this Feature might still be visible, depending on their settings.
      */