@roomle/embedding-lib 4.44.0 → 5.1.0-alpha.1

package/docs/api/interfaces/types.VariantsMap.md

@@ -1,9 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / VariantsMap
-
-# Interface: VariantsMap
-
-[types](../modules/types.md).VariantsMap
-
-## Indexable
-
-▪ [key: `string`]: `RapiId`

package/docs/api/modules/exposed_analytics_callbacks.md

@@ -1,9 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / exposed-analytics-callbacks
-
-# Module: exposed-analytics-callbacks
-
-## Table of contents
-
-### Classes
-
-- [ExposedAnalyticsCallbacks](../classes/exposed_analytics_callbacks.ExposedAnalyticsCallbacks.md)

package/docs/api/modules/exposed_api.md

@@ -1,9 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / exposed-api
-
-# Module: exposed-api
-
-## Table of contents
-
-### Classes
-
-- [ExposedApi](../classes/exposed_api.ExposedApi.md)

package/docs/api/modules/exposed_callbacks.md

@@ -1,14 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / exposed-callbacks
-
-# Module: exposed-callbacks
-
-## Table of contents
-
-### Classes
-
-- [ExposedCallbacks](../classes/exposed_callbacks.ExposedCallbacks.md)
-
-### Interfaces
-
-- [Labels](../interfaces/exposed_callbacks.Labels.md)
-- [Price](../interfaces/exposed_callbacks.Price.md)

package/docs/api/modules/roomle_configurator_api.md

@@ -1,49 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / roomle-configurator-api
-
-# Module: roomle-configurator-api
-
-## Table of contents
-
-### Classes
-
-- [default](../classes/roomle_configurator_api.default.md)
-
-### Interfaces
-
-- [RoomleEmbeddingApiKeys](../interfaces/roomle_configurator_api.RoomleEmbeddingApiKeys.md)
-
-### Type aliases
-
-- [RoomleConfiguratorApi](roomle_configurator_api.md#roomleconfiguratorapi)
-- [RoomlePlannerApi](roomle_configurator_api.md#roomleplannerapi)
-- [RoomleViewerApi](roomle_configurator_api.md#roomleviewerapi)
-
-## Type aliases
-
-### RoomleConfiguratorApi
-
-Ƭ **RoomleConfiguratorApi**: [`default`](../classes/roomle_configurator_api.default.md)<`RoomleConfigurator`, `ConfiguratorUiCallbacks`\>
-
-#### Defined in
-
-[src/configurator/embedding/roomle-configurator-api.ts:70](https://github.com/roomle-dev/roomle-ui/blob/8222e2cc/src/configurator/embedding/roomle-configurator-api.ts#L70)
-
-___
-
-### RoomlePlannerApi
-
-Ƭ **RoomlePlannerApi**: [`default`](../classes/roomle_configurator_api.default.md)<`RoomlePlanner`, `ConfiguratorUiCallbacks`\>
-
-#### Defined in
-
-[src/configurator/embedding/roomle-configurator-api.ts:72](https://github.com/roomle-dev/roomle-ui/blob/8222e2cc/src/configurator/embedding/roomle-configurator-api.ts#L72)
-
-___
-
-### RoomleViewerApi
-
-Ƭ **RoomleViewerApi**: [`default`](../classes/roomle_configurator_api.default.md)<`RoomleGLBViewer`, `ConfiguratorUiCallbacks`\>
-
-#### Defined in
-
-[src/configurator/embedding/roomle-configurator-api.ts:71](https://github.com/roomle-dev/roomle-ui/blob/8222e2cc/src/configurator/embedding/roomle-configurator-api.ts#L71)

package/docs/api/modules/types.md

@@ -1,16 +0,0 @@
-[Embedding API Reference](../README.md) / [Modules](../modules.md) / types
-
-# Module: types
-
-## Table of contents
-
-### Enumerations
-
-- [UI\_BUTTON](../enums/types.UI_BUTTON.md)
-
-### Interfaces
-
-- [ConfiguratorSettings](../interfaces/types.ConfiguratorSettings.md)
-- [EmbeddingSkin](../interfaces/types.EmbeddingSkin.md)
-- [UiInitData](../interfaces/types.UiInitData.md)
-- [VariantsMap](../interfaces/types.VariantsMap.md)

package/docs/api/modules.md

@@ -1,13 +0,0 @@
-[Embedding API Reference](README.md) / Modules
-
-# Embedding API Reference
-
-## Table of contents
-
-### Modules
-
-- [exposed-analytics-callbacks](modules/exposed_analytics_callbacks.md)
-- [exposed-api](modules/exposed_api.md)
-- [exposed-callbacks](modules/exposed_callbacks.md)
-- [roomle-configurator-api](modules/roomle_configurator_api.md)
-- [types](modules/types.md)

package/docs/examples/00_init.html

@@ -1,38 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-            }
-            .configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <button id="button-to-load-product-x">Load Product X</button>
-        <div id="configurator-container-1" class="configurator-container"></div>
-        <div id="configurator-container-2" class="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-              const objectToLoadId = 'usm:frame:BB3BB3E7951BC15109B1FF86D78C95DE3FB46E9F78714C46FFA2DE91866A2C2B';
-              const configuratorId = 'demoConfigurator';
-              const domElement1 = document.getElementById('configurator-container-1');
-              const domElement2 = document.getElementById('configurator-container-2');
-              const configurator1 = await RoomleConfiguratorApi.createConfigurator(configuratorId, domElement1, {id: objectToLoadId});
-              // instantiate the second configurator, because you can now :-) and wait with the load of the object
-              // until the user clicks on a specific product
-              const configurator2 = await RoomleConfiguratorApi.createConfigurator(configuratorId, domElement2, {});
-              // load the object into the second configurator when the user clicks on a specific button
-              document.getElementById('button-to-load-product-x').addEventListener('click', () => {
-                configurator2.ui.loadObject(objectToLoadId);
-              });
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/01_small_screen.html

@@ -1,37 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <button>Start configure</button>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                    buttons: {startconfigure: false}
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                const button = document.querySelector('button');
-                button.addEventListener('click', () => configurator.ui.startConfiguring());
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/02_resize_callback.html

@@ -1,46 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-            button {
-              display: none;
-            }
-        </style>
-    </head>
-
-    <body>
-        <button>Start configure</button>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                const button = document.querySelector('button');
-                configurator.ui.callbacks.onResize = (isDesktop) => {
-                  if (!isDesktop) {
-                    button.style.display = 'block';
-                  } else {
-                    button.style.display = 'none';
-                  }
-                };
-                button.addEventListener('click', () => configurator.ui.startConfiguring());
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/03_instant_start.html

@@ -1,38 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <button>Start configure</button>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                };
-                const button = document.querySelector('button');
-                button.addEventListener('click', async () => {
-                  const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                  );
-                  configurator.ui.startConfiguring();
-                });
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/04_price.html

@@ -1,48 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                // fake implementation of a database
-                // only for showcase purpose
-                const priceDataBase = {};
-                configurator.ui.callbacks.onPartListUpdate = (partList) => {
-                    const parts = partList.fullList;
-                    let priceSum = parts.reduce((sum, part) => {
-                        if (!priceDataBase[part.articleNr]) {
-                            priceDataBase[part.articleNr] = Math.random() * 10;
-                        }
-                        return sum += priceDataBase[part.articleNr];
-                    }, 0);
-                    const shippingCosts = 30;
-                    // Tell the Roomle Configurator to show the current price
-                    configurator.ui.setPrice('€', priceSum + shippingCosts);
-                };
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/05_analytics.html

@@ -1,38 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                const fakeGtag = () => undefined;
-                configurator.analytics.callbacks.onGATracking = function () {
-                  console.log('Analytics event from iframe');
-                  fakeGtag(...arguments);
-                };
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/06_skinning.html

@@ -1,39 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 1024px;
-                height: 768px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                    skin: {
-                      'primary-color': '#1d68bd', // optional but please use a CSS RGB hex like #ff00ff if you want to rely on the color detection see explaination above
-                      'color-on-primary': '#f4e440', // optional, Roomle can decide this for you
-                      'cta-color': '#980d3f',  // please use a CSS RGB hex like #ff00ff if you want to rely on the color detection see explaination above
-                      'color-on-cta': '#8e8e8e', // optional, Roomle can decide this for you
-                    },
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/07_request_product.html

@@ -1,41 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 1024px;
-                height: 768px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="trigger-request">Trigger request</div>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                configurator.ui.callbacks.onRequestProduct = (configurationId, image, partlist, price, labels, configuration) => {
-                  console.log(configurationId, image, partlist, price, labels, configuration);
-                };
-                document.getElementById('trigger-request').addEventListener('click', async () => {
-                  await configurator.ui.triggerRequestProduct();
-                  console.log('trigger-request-done');
-                });
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/08_variants.html

@@ -1,36 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 1024px;
-                height: 768px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame',
-                    variants: {
-                      'usm:frame': 'DB_Start_ohne_Element'
-                    }
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/09_different_products.html

@@ -1,63 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            .product {
-              width: 90px;
-              height: 90px;
-              margin: 10px;
-              background-color:azure;
-              border: 1px solid blue;
-              color: #090909;
-              text-align: center;
-              float: left;
-              display: flex;
-              align-items: center;
-              cursor: pointer;
-            }
-            .product div {
-              width: 100%;
-            }
-            #configurator-container {
-                width: 1024px;
-                height: 600px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div class="product" data-roomle-id="usm:frame:39F98154FEE57E476A65433664F29007583432D6B4DA75B9A2CBC6977EFD6BBE"><div>Product 1</div></div>
-        <div class="product" data-roomle-id="usm:frame:68AB2631D0E02A9FBBCA1371621CD23BB68818685738868D7DEB5B830BD5CD2D"><div>Product 2</div></div>
-        <div class="product" data-roomle-id="usm:frame:98CAB167BA04B19AFD9CF30A73ECE546B0541E03F9E40E1446B8378BAAD8BAB4"><div>Product 3</div></div>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {
-                    id: 'usm:frame'
-                };
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                const buttons = document.querySelectorAll('.product');
-                [...buttons].forEach((button) => {
-                  button.addEventListener('click', (productDomNode) => {
-                    const target = productDomNode.target;
-                    let roomleId = target.getAttribute('data-roomle-id') || target.parentElement.getAttribute('data-roomle-id');
-                    if(!roomleId) {
-                      return;
-                    }
-                    configurator.ui.loadObject(roomleId);
-                  });
-                });
-            })();
-        </script>
-    </body>
-</html>

package/docs/examples/10_landing_page.html

@@ -1,38 +0,0 @@
-<html>
-    <head>
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-            #configurator-container {
-                width: 1024px;
-                height: 768px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="configurator-container"></div>
-        <script src="./roomle-configurator-api.es.min.js" type="module"></script>
-        <script type="module">
-            import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
-            (async ()=> {
-                const options = {};
-                const configurator = await RoomleConfiguratorApi.createConfigurator(
-                    'demoConfigurator',
-                    document.getElementById('configurator-container'),
-                    options,
-                );
-                const urlParams = new URLSearchParams(window.location.search);
-                const roomleId = urlParams.get('roomleId');
-                if(!roomleId) {
-                  console.warn('Please add the query param roomleId to the URL, as test value you can use: usm:frame:68AB2631D0E02A9FBBCA1371621CD23BB68818685738868D7DEB5B830BD5CD2D');
-                  return;
-                }
-                configurator.ui.loadObject(roomleId);
-            })();
-        </script>
-    </body>
-</html>