@crystaldesign/diva-web-planner-react 25.8.0-beta.29 → 25.8.0-beta.3

package/build/esm/index-ec5add54.js

@@ -1,103 +0,0 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-1cd57760.js';
-import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import { useState, useCallback } from 'react';
-import { observer } from 'mobx-react-lite';
-import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
-import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
-import SettingsHeader from './index-c2c0cfe6.js';
-import classnames from 'classnames';
-import Search from './index-7e4bf722.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var pdpOverlay = "pdp-overlay-2gWQq";
-var navigationVisible = "navigation-visible-goqGH";
-var pdpBackground = "pdp-background-1tl-9";
-var pdpContainer = "pdp-container-EljBO";
-var isMobileClass = "is-mobile-class-eOYXj";
-var closeButton = "close-button-tHReC";
-var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
-styleInject(css_248z);
-
-var ProductList = function ProductList(_ref) {
-  var _viewHandler$settings, _viewHandler$getViewC;
-  var item = _ref.item;
-  var _useDivaCore = useDivaCore();
-    _useDivaCore.actions.openComponent;
-    var _useDivaCore$state = _useDivaCore.state,
-    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
-    _useDivaCore$state$di = _useDivaCore$state.dimensions,
-    isMobile = _useDivaCore$state$di.isMobile,
-    height = _useDivaCore$state$di.height,
-    isPortrait = _useDivaCore$state$di.isPortrait,
-    organization = _useDivaCore$state.organization;
-  var _useTranslation = useTranslation();
-    _useTranslation.t;
-  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
-  var currentlyMobile = isMobile && isPortrait || height < 500;
-  var viewHandler = useViewHandler();
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentProductId = _useState2[0],
-    setCurrentProductId = _useState2[1];
-  var productState = useProductState({
-    parameters: {
-      'customFlags.variantsList.organizations': organization._id
-    },
-    sort: '{-created}',
-    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
-  });
-  var closePDP = useCallback(function () {
-    setCurrentProductId(undefined);
-  }, []);
-  var openPDP = useCallback(function (_ref2) {
-    var _id = _ref2._id;
-    setCurrentProductId(_id);
-  }, []);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(SettingsHeader, {
-      isInScroller: false,
-      isSettingsHeader: true,
-      item: item,
-      specialElement1: /*#__PURE__*/jsx(Search, {
-        searchState: productState.search
-      })
-    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
-      productState: productState,
-      onClickFunction: openPDP
-    }), currentProductId && /*#__PURE__*/jsxs("div", {
-      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
-      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
-        onClick: closePDP,
-        className: pdpBackground
-      }), /*#__PURE__*/jsxs("div", {
-        className: pdpContainer,
-        children: [/*#__PURE__*/jsx("div", {
-          onClick: closePDP,
-          className: closeButton
-        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
-          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
-          productId: currentProductId
-        })]
-      })]
-    })]
-  });
-};
-var index = observer(ProductList);
-
-export { index as default };

package/build/esm/index-ec5ce201.js

@@ -1,234 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, C as Checkout } from './index-1cd57760.js';
-import React, { useState, useEffect, Suspense } from 'react';
-import { observer } from 'mobx-react-lite';
-import sift from 'sift';
-import TextBox from './index-32651b83.js';
-import ItemVariant from './index-a454b68b.js';
-import SettingsPaletteGroup from './index-3f059d2a.js';
-import ToggleOption from './index-e70b67cb.js';
-import GroupDropdown from './index-6298f42d.js';
-import PromotedProducts from './index-8cc23e1e.js';
-import ToggleName from './index-9aff6816.js';
-import itemPaletteTypeComponentMap from './index-2a3ef4fc.js';
-import ItemWrapper from './index-7d526616.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-var collapsableInner = "collapsable-inner-YPvJa";
-var css_248z = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\n}\n";
-styleInject(css_248z);
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-33edc6ab.js');
-});
-var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-72359019.js');
-});
-var ProductList = /*#__PURE__*/React.lazy(function () {
-  return import('./index-ec5add54.js');
-});
-var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
-  var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
-  var item = _ref.item,
-    groupSize = _ref.groupSize;
-  var viewHandler = useViewHandler();
-  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
-  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredGroups = _useState2[0],
-    setFilteredGroups = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filteredGroupsWithEmptyGroups = _useState4[0],
-    setFilteredGroupsWithEmptyGroups = _useState4[1];
-  useEffect(function () {
-    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
-      return _objectSpread(_objectSpread({}, group), {}, {
-        items: item.currentItemsFilter && item.type !== 'PLANNERSWITCH' ? group.items.filter(sift(item.currentItemsFilter)) : group.items
-      });
-    });
-    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
-      return group.items.length > 0;
-    });
-    if (filteredGroups.length > 0) {
-      filteredGroupsWithEmptyGroups = filteredGroups;
-    }
-    setFilteredGroups(filteredGroups);
-    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
-  }, [item, viewHandler.settingsState.itemPalettes]);
-  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
-  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
-
-  //this code now sets a css variable within a specific palette to define the grid items size and gird gap
-  //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
-  //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
-  var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
-  var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
-  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
-  var infoIconSize = undefined;
-  if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-    gridSize = '240px';
-  } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-    gridSize = 'calc(100% - 20px)';
-  } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-    gridSize = '100px';
-  } else if (item.type == 'ACC') {
-    if (settingsSizes.sizeAccessoires) {
-      gridSize = settingsSizes.sizeAccessoires;
-    }
-  } else if (item.type == 'ACC_CONFIG') {
-    gridSize = '100%';
-  } else if (item.type.startsWith('GAL_SMALL')) {
-    gridSize = '60px';
-  } else if (item.type == 'RANGE') {
-    gridSize = '100%';
-  } else if (item.type == 'GAL') {
-    var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
-    gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
-  } else if (item.type === 'PLANNERSWITCH') {
-    gridSize = '170px';
-  } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
-    //for the usecase of schlaraffia in mobile
-    //TODO for refactorig this should be done nicer
-    gridSize = '120px';
-  } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-    gridSize = '120px';
-  } else if (item.type === 'VERY_SMALL') {
-    gridSize = '48%';
-  } else if (item.type === 'GAL_TEXT') {
-    gridSize = '100px';
-  } else if (item.type === 'GAL_BIG_TEXT') {
-    gridSize = '120px';
-  } else if (item.type === 'GAL_SMALL_TEXT') {
-    gridSize = '70px';
-  }
-  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
-    infoIconSize = '20px';
-  }
-  var variables = _objectSpread({
-    '--gridSize': gridSize,
-    '--gridGap': gridGap
-  }, infoIconSize ? {
-    '--infoIconSize': infoIconSize
-  } : {});
-  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
-  switch (item.type) {
-    case 'CHECKOUT':
-      return /*#__PURE__*/jsx(Checkout, {
-        viewHandler: viewHandler
-      });
-    case 'TOGGLE':
-      return /*#__PURE__*/jsx(ToggleOption, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TOGGLE_NAME':
-      return /*#__PURE__*/jsx(ToggleName, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'TEXTBOX':
-      return /*#__PURE__*/jsx(TextBox, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'DROPDOWN_TEXT':
-    case 'DROPDOWN_IMAGE':
-      return /*#__PURE__*/jsx(ItemVariant, {
-        style: variables,
-        item: item,
-        paletteId: item.id
-      });
-    case 'NUMBER':
-      return /*#__PURE__*/jsx(PaletteComponent, {
-        paletteId: item.id,
-        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
-        groupSize: groupSize
-      }, item.id + item.configStepKey);
-    case 'SHELFPLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(ShelfPlanner, {
-          filteredGroups: filteredGroups,
-          item: item,
-          id: item.id,
-          style: variables
-        }, item.id)
-      });
-    case 'PRODUCTS':
-      return /*#__PURE__*/jsx(ProductList, {
-        item: item
-      });
-    case 'PROMOTED':
-      return /*#__PURE__*/jsx(PromotedProducts, {
-        item: item
-      });
-    case 'DOOR_PLANNER':
-      return /*#__PURE__*/jsx(Suspense, {
-        fallback: /*#__PURE__*/jsx(Fragment, {}),
-        children: /*#__PURE__*/jsx(DoorPlanner, {
-          item: item
-        })
-      });
-    case 'GAL_GROUP_DROPDOWN':
-    case 'GAL_SMALL_GROUP_DROPDOWN':
-      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
-        item: item,
-        PaletteComponent: PaletteComponent,
-        filteredGroups: filteredGroupsWithEmptyGroups,
-        id: item.id,
-        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
-        contentInnerClassName: innerGridClass
-      }, item.configStepKey);
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: childGroup
-      });
-    default:
-      var children;
-      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
-        className: innerGridClass,
-        children: filteredGroups.map(function (group) {
-          return group.items.map(function (paletteItem, i) {
-            return /*#__PURE__*/jsx(PaletteComponent, {
-              paletteType: item.type,
-              paletteId: item.id,
-              item: paletteItem
-            }, getKey(paletteItem));
-          });
-        })
-      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
-        groups: filteredGroups,
-        contentInnerClassName: innerGridClass,
-        itemPalette: item,
-        PaletteComponent: PaletteComponent
-      });
-      return /*#__PURE__*/jsx(ItemWrapper, {
-        style: variables,
-        item: item,
-        children: children
-      });
-  }
-};
-var getKey = function getKey(item) {
-  var _ref2, _ref3, _item$codex;
-  return (_ref2 = (_ref3 = (_item$codex = item.codex) !== null && _item$codex !== void 0 ? _item$codex : item.key) !== null && _ref3 !== void 0 ? _ref3 : item.articleCodex) !== null && _ref2 !== void 0 ? _ref2 : item.title;
-};
-var SettingsItem = observer(SettingsPaletteItem);
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getKey: getKey,
-  'default': SettingsItem
-});
-
-export { SettingsItem as S, collapsableInner as c, getKey as g, index as i };

package/build/esm/index-ec6e2538.js

@@ -1,68 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-1cd57760.js';
-import { createElement } from 'react';
-import { observer } from 'mobx-react-lite';
-import classnames from 'classnames';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var svgWrapper = "svg-wrapper-hvaq9";
-var css_248z = ".svg-wrapper-hvaq9 {\n  margin-left: 50px;\n  color: rgba(255,255,255,0.42353);\n  height: 100vh;\n}\n.table-GRFj- {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  background-color: rgb(28, 32, 35);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  gap: 10px;\n}\n.column-CbeYE {\n  width: 20%;\n  border-bottom: 1px solid;\n}\n.image-zSukX {\n  width: 50px;\n  height: 50px;\n}\n.svg-wrapper-hvaq9 textarea {\n  background-color: rgb(28, 32, 35);\n  color: white;\n  width: 97.7%;\n  height: 100%;\n  padding-top: 2%;\n  padding-left: 2%;\n  overflow: auto;\n}\n.svg-wrapper-hvaq9 .expanded-rBYHe {\n  max-height: 62.1%;\n  transition: max-height 0.5s;\n}\n\n.cur-item-PDYTf {\n  color: black !important;\n}\n\n.cur-item-PDYTf {\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.table-GRFj- img {\n  height: 50px;\n  width: 50px;\n}\n.table-GRFj- tbody {\n  height: 100%;\n  vertical-align: top;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.table-GRFj- tr th {\n  width: 4%;\n}\n.table-GRFj- tr th:last-child {\n  width: 90px;\n}\n.table-GRFj- thead {\n  border-bottom: 1px solid white;\n}\n.table-GRFj- tbody th {\n  width: 23px;\n  table-layout: fixed;\n  line-break: anywhere;\n  font-size: 15px;\n}\n.table-GRFj- tbody th:nth-child(1) {\n  width: 35px;\n}\n.table-GRFj- tbody th:last-child {\n  width: 890px;\n  font-size: 9px;\n}\n.selected-cRqzN {\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.collapsibleHeader-7zGnE {\n  top: 10px;\n  width: 47.6%;\n  text-align: center;\n  color: black;\n  background-color: rgba(96, 245, 96, 0.377);\n}\n.collapsible-4mPxe {\n  position: absolute;\n  top: 286px;\n  width: 100%;\n}\n";
-styleInject(css_248z);
-
-var _excluded = ["curBox", "isExpanded", "state"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SVGSourceViewer = function SVGSourceViewer(_ref) {
-  var _articles$0$plannerDa, _articles$0$plannerDa2;
-  _ref.curBox;
-    _ref.isExpanded;
-    var state = _ref.state,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var viewHandler = useViewHandler();
-  var articlesLoaded = viewHandler.divaWebPlanner.getDivaArticles();
-  if (!articlesLoaded) return /*#__PURE__*/jsx(Fragment, {});
-  var articles = Object.values(articlesLoaded).filter(function (a) {
-    return a.catalogArticle.catalogPlannerArticle;
-  });
-  if (!articles.length) return /*#__PURE__*/jsx(Fragment, {});
-  var svgBefore = (_articles$0$plannerDa = articles[0].plannerData) === null || _articles$0$plannerDa === void 0 ? void 0 : _articles$0$plannerDa.svgBefore;
-  var svgAfter = (_articles$0$plannerDa2 = articles[0].plannerData) === null || _articles$0$plannerDa2 === void 0 ? void 0 : _articles$0$plannerDa2.svgAfter;
-  var svg = state == 'before' ? svgBefore : svgAfter;
-  return /*#__PURE__*/createElement("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: classnames(svgWrapper),
-    key: viewHandler.settingsState.configChanged
-  }), /*#__PURE__*/jsxs("div", {
-    style: {
-      height: 500,
-      overflow: 'auto'
-    },
-    children: [/*#__PURE__*/jsx("button", {
-      onClick: function onClick() {
-        return navigator.clipboard.writeText(svg !== null && svg !== void 0 ? svg : '');
-      },
-      children: "copy"
-    }), /*#__PURE__*/jsx("textarea", {
-      readOnly: true,
-      value: svg
-    })]
-  }));
-};
-var SVGSourceViewer$1 = observer(SVGSourceViewer);
-
-export { SVGSourceViewer$1 as default };

package/build/esm/index-ed32b957.js

@@ -1,43 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-1cd57760.js';
-import 'react';
-import BasketActionStandard from './index-5c4162c8.js';
-import { observer } from 'mobx-react-lite';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'classnames';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-import './index.module-ce788397.js';
-
-var wcCheckoutButtonText = "wcCheckoutButtonText-bETEx";
-var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-iT78h";
-var css_248z = ".wcCheckoutButtonText-bETEx {\n  float: left;\n  margin-left: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n\n.wcCheckoutButtonPrice-iT78h {\n  float: right;\n  margin-right: 100px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n";
-styleInject(css_248z);
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BasketActionGold = function BasketActionGold(props) {
-  var viewHandler = useViewHandler();
-  return /*#__PURE__*/jsx(BasketActionStandard, _objectSpread(_objectSpread({}, props), {}, {
-    buttonTextClassName: wcCheckoutButtonText,
-    buttonPriceClassName: wcCheckoutButtonPrice,
-    price: viewHandler.productState.formatedCurSetPrice
-  }));
-};
-var index = observer(BasketActionGold);
-
-export { index as default };

package/build/esm/index-ee81bb62.js

@@ -1,137 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-1cd57760.js';
-import classnames from 'classnames';
-import { useHover, useLayer } from 'react-laag';
-import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import MetaData from './index-6eda84ea.js';
-import GenericToolTip from './index-af273144.js';
-import InfoIcon from './index-291d2530.js';
-import PricePreview from './index-96b527dd.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var articleItem = "ArticleItem-2xa9z";
-var sel = "sel-3vhEw";
-var replacemode = "replacemode-XssaJ";
-var wcArticleInfoContainer = "wcArticleInfoContainer-6umFd";
-var pricesAreHiddenClass = "pricesAreHiddenClass-5i5mY";
-var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-C-sNn";
-var wcConfiguratorSettingsTitleSingleLine = "wcConfigurator-settings-title-single-line-xIggU";
-var wcSize = "wcSize-DKVv4";
-var wcSizeNormal = "wcSize-normal-H7PI-";
-var wcImage = "wcImage-bSQnw";
-var wcArticleSize = "wcArticleSize-FGDRM";
-var css_248z = "/*Planner*/\n\n.ArticleItem-2xa9z {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  white-space: pre-line;\n  border: 3px solid transparent;\n  border: 3px solid var(--optionItemBorderColor, transparent);\n}\n.sel-3vhEw {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderSelColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.ArticleItem-2xa9z.replacemode-XssaJ:hover {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderHoverColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.wcArticleInfoContainer-6umFd {\n  display: flex;\n  float: left;\n  margin-top: 8px;\n  margin-left: 8px;\n  height: calc(100% - 14px);\n  max-width: calc(100% - 171.2px);\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.pricesAreHiddenClass-5i5mY .wcArticleInfoContainer-6umFd {\n  max-width: calc(100% - 100px);\n}\n\n.ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.ArticleItem-2xa9z .wcConfigurator-settings-title-single-line-xIggU {\n  -webkit-line-clamp: 1;\n}\n.ArticleItem-2xa9z .wcSize-DKVv4 {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.ArticleItem-2xa9z .wcSize-DKVv4.wcSize-normal-H7PI- {\n  max-height: 74px;\n}\n\n.ArticleItem-2xa9z .wcImagePlaceHolder-KQO1T {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.ArticleItem-2xa9z .wcImage-bSQnw {\n  width: 74px;\n  height: 74px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  margin-left: 3.2px;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.ArticleItem-2xa9z .wcArticleSize-FGDRM {\n  bottom: 8px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ArticleItem-2xa9z .wcArticleSize-FGDRM:hover {\n  overflow: visible;\n}\n@media all and (max-width: 1100px) {\n  .ArticleItem-2xa9z .wcSize-normal-H7PI- {\n    height: 96px;\n  }\n\n  .ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n    -webkit-line-clamp: 2;\n  }\n}\n";
-styleInject(css_248z);
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Article = function Article(_ref) {
-  var _renderLayer, _item$longDescription;
-  var itemP = _ref.item,
-    paletteId = _ref.paletteId;
-  var item = itemP;
-  var viewHandler = useViewHandler();
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    _useDivaCore$state$di = _useDivaCore$state.dimensions,
-    isMobile = _useDivaCore$state$di.isMobile,
-    isTablet = _useDivaCore$state$di.isTablet,
-    hidePrices = _useDivaCore$state.hidePrices;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    metaDataVisible = _useState2[0],
-    setMetaDataVisible = _useState2[1];
-
-  /* tool tip stuff*/
-  var triggerProps = {};
-  var layerProps = {};
-  var renderLayer = undefined;
-  var isOver = false;
-  var hoverProps = {};
-  var hover = useHover({
-    delayEnter: 600,
-    hideOnScroll: true
-  });
-  var tooltip = useLayer({
-    isOpen: hover[0],
-    auto: true,
-    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
-  });
-  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
-    isOver = hover[0];
-    hoverProps = hover[1];
-    triggerProps = tooltip.triggerProps;
-    layerProps = tooltip.layerProps;
-    renderLayer = tooltip.renderLayer;
-  }
-  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || !item.price;
-  var isInReplaceMode = viewHandler.settingsState.plannerReplaceMode && !(paletteId == 1 && viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
-    className: classnames(articleItem, pricesAreHidden ? pricesAreHiddenClass : undefined, 'wcConfigurator_Article', item.sel ? sel : undefined, isInReplaceMode ? replacemode : undefined),
-    onClick: function onClick() {
-      return viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
-    }
-  }, triggerProps), hoverProps), {}, {
-    children: [/*#__PURE__*/jsxs("div", {
-      className: classnames(wcSize, wcSizeNormal),
-      children: [/*#__PURE__*/jsx("div", {
-        className: classnames(wcImage),
-        style: {
-          backgroundImage: "url(".concat(item.imgSrc, ")")
-        }
-      }), /*#__PURE__*/jsxs("div", {
-        className: classnames(wcArticleInfoContainer),
-        children: [/*#__PURE__*/jsx("div", {
-          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible ? wcConfiguratorSettingsTitleSingleLine : undefined),
-          dangerouslySetInnerHTML: {
-            __html: item.title
-          }
-        }), /*#__PURE__*/jsx(MetaData, {
-          metaData: item.metaData,
-          visible: [metaDataVisible, setMetaDataVisible]
-        }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
-          text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.title,
-          desciption: metaDataVisible,
-          codex: item.articleCodex,
-          image: item.imgSrc,
-          layerProps: layerProps
-        }, item.codex))), /*#__PURE__*/jsx("div", {
-          className: classnames(wcArticleSize),
-          children: item.sizeInfo
-        })]
-      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
-        item: item,
-        style: {
-          bottom: 8
-        }
-      }, item.articleCodex)]
-    }), !pricesAreHidden && /*#__PURE__*/jsx(PricePreview, {
-      price: item.price,
-      style: {
-        right: -3,
-        top: -3,
-        paddingTop: 6
-      }
-    })]
-  }));
-};
-var Article$1 = observer(Article);
-
-export { Article$1 as default };

package/build/esm/index-efae7f87.js

@@ -1,51 +0,0 @@
-import { s as styleInject } from './index-1cd57760.js';
-import 'react';
-import { observer } from 'mobx-react-lite';
-import Item from './index-fbd33498.js';
-import { jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import '@crystaldesign/web-planner-logic';
-import 'classnames';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-import 'react-laag';
-import './index-af273144.js';
-import './index-96b527dd.js';
-import './index-6eda84ea.js';
-
-var wrapper = "wrapper-Da1y8";
-var css_248z = ".wrapper-Da1y8 {\n  display: flex;\n  margin-left: 16px;\n  margin-right: 16px;\n  gap: 6px 10px;\n  overflow: auto;\n  width: 100%;\n  flex-wrap: wrap;\n}\n";
-styleInject(css_248z);
-
-var SelectedOpv = function SelectedOpv(_ref) {
-  var item = _ref.item,
-    selectedElements = _ref.selectedElements;
-  return /*#__PURE__*/jsx("div", {
-    className: wrapper,
-    style: {
-      marginTop: selectedElements.length ? 16 : undefined
-    },
-    children: selectedElements.map(function (selectedElement, i) {
-      return /*#__PURE__*/jsx(Item, {
-        selectedElement: selectedElement,
-        paletteId: item.id
-      }, selectedElement.codex);
-    })
-  });
-};
-var SelectedOpv$1 = observer(SelectedOpv);
-
-export { SelectedOpv$1 as default };