@crystaldesign/diva-web-planner-react 25.10.0-beta.31 → 25.10.0-beta.33

package/build/esm/index-5d7fcbb7.js

@@ -1,125 +0,0 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import './index-2c954057.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
-import { Vector2 } from '@crystaldesign/web-planner-logic';
-import { jsx } from 'react/jsx-runtime';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var mousePosOnScreenLastFrame = new Vector2(0, 0);
-var Outline = function Outline(_ref) {
-  var _item$size, _item$size2;
-  var item = _ref.item,
-    plannerUIProps = _ref.plannerUIProps;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  var _useState3 = useState(item.position.x),
-    _useState4 = _slicedToArray(_useState3, 2),
-    posX = _useState4[0],
-    setPosX = _useState4[1];
-  var _useState5 = useState(item.position.y),
-    _useState6 = _slicedToArray(_useState5, 2),
-    posY = _useState6[0],
-    setPosY = _useState6[1];
-  var mouseDownDetected = false;
-
-  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
-  return /*#__PURE__*/jsx("div", {
-    onClick: function onClick() {
-      var _item$clickFunction;
-      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
-    },
-    onMouseDown: function onMouseDown(e) {
-      mouseDownDetected = true;
-      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
-    },
-    onTouchStart: function onTouchStart(e) {
-      if (e.touches.length != 1) return;
-      mouseDownDetected = true;
-      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
-    },
-    onMouseMove: function onMouseMove(e) {
-      if (mouseDownDetected && !isDragging) {
-        var _item$onDragStartFunc;
-        setIsDragging(true);
-        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
-      }
-      if (isDragging) {
-        var _item$onDragMoveFunct;
-        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
-        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
-
-        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
-        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
-        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
-        mousePosOnScreenLastFrame.x = e.clientX;
-        mousePosOnScreenLastFrame.y = e.clientY;
-      }
-      mouseDownDetected = false;
-    },
-    onTouchMove: function onTouchMove(e) {
-      if (e.touches.length != 1) return;
-      if (mouseDownDetected && !isDragging) {
-        var _item$onDragStartFunc2;
-        setIsDragging(true);
-        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
-      }
-      if (isDragging) {
-        var _item$onDragMoveFunct2;
-        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
-        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
-
-        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
-        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
-        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
-        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
-        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
-      }
-      mouseDownDetected = false;
-    },
-    onMouseUp: function onMouseUp() {
-      if (isDragging) {
-        var _item$onDragEndFuncti;
-        setIsDragging(false);
-        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
-      }
-      mouseDownDetected = false;
-    },
-    onTouchEnd: function onTouchEnd() {
-      if (isDragging) {
-        var _item$onDragEndFuncti2;
-        setIsDragging(false);
-        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
-      }
-      mouseDownDetected = false;
-    },
-    style: {
-      left: posX + 'px',
-      top: posY + 'px',
-      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
-      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
-      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
-    },
-    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
-  });
-};
-var Outline$1 = observer(Outline);
-
-export { Outline$1 as default };

package/build/esm/index-5da382c5.js

@@ -1,200 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useRef, useEffect } from 'react';
-import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-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 verticalItem = "verticalItem-NmQDx";
-var wcSpan = "wcSpan-0wnmJ";
-var verticalItemPoligon = "verticalItemPoligon-M44lA";
-var wcActiveStep = "wcActiveStep-ykv3D";
-var wcVisitedStep = "wcVisitedStep-qDdfW";
-var wcStepIcon = "wcStepIcon-7hz1S";
-var css_248z = ".verticalItem-NmQDx {\n  font-size: 12px;\n  width: 100%;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  vertical-align: top;\n  zoom: 1;\n  box-sizing: content-box;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #000;\n  color: var(--tabGroupStepVisitedFont, #000);\n}\n\n.wcSpan-0wnmJ {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  font-size: 12px;\n  line-height: 14px;\n  height: 3.5rem;\n  letter-spacing: 0.3px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.4px;\n  background-image: none;\n  text-align: center;\n  display: block;\n  width: 100%;\n}\n\n.verticalItemPoligon-M44lA {\n  fill: var(--thirdColor);\n  fill: var(--tabGroupStep, var(--thirdColor));\n  transition:\n    fill 0.3s ease,\n    color 0.3s ease;\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n  color: white;\n}\n/* .verticalItemPoligon.wcVisitedStep {\n  border: #b1b1b1 1px solid;\n} */\n\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\n  fill: #b1b1b1;\n  fill: var(--tabGroupStepVisited, #b1b1b1);\n}\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\n  fill: var(--primaryColor);\n  fill: var(--tabGroupStepActive, var(--primaryColor));\n}\n\n.verticalItemPoligon-M44lA:hover,\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\n  fill: #bbbbbb;\n  fill: var(--tabGroupStepHover, #bbbbbb);\n}\n\n.wcStepIcon-7hz1S {\n  display: block;\n  background-color: #000;\n  background-color: var(--tabGroupStepVisitedFont, #000);\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\n  background-color: white;\n}\n";
-styleInject(css_248z);
-
-var getIconOfTabGroup = function getIconOfTabGroup(tabGroup, baseCdnUrl, tabGroupObj) {
-  var sirvURL = baseCdnUrl + '/static/images/TabIcons/';
-  if (tabGroupObj) {
-    if (tabGroupObj[tabGroup.toLowerCase()]) return sirvURL + tabGroupObj[tabGroup.toLowerCase()];else if (tabGroupObj[tabGroup]) return sirvURL + tabGroupObj[tabGroup];
-  }
-  switch (tabGroup) {
-    case 'StaticRoomList':
-      return sirvURL + 'room.svg';
-    case 'Planner':
-    case 'PRODUCTS':
-    case 'PROMOTED':
-      return sirvURL + 'planner.svg';
-    case 'Summary':
-      return sirvURL + 'summary.svg';
-    case 'Piede':
-    case 'pieds':
-    case 'Fuss':
-    case 'Fuß':
-    case 'Fu':
-    case 'Fsse':
-      return sirvURL + 'feet.svg';
-    case 'Testiera':
-    case 'tte de lit':
-    case 'Kopfteil':
-    case 'Headboard':
-      return sirvURL + 'bed_headboard.svg';
-    case 'materasso':
-    case 'matelas':
-    case 'Matratze':
-    case 'Matratze Zubehr':
-      return sirvURL + 'mattress.svg';
-    case 'dimensioni':
-    case 'dimension':
-    case 'Grsse':
-      return sirvURL + 'dimensions.svg';
-    case 'Topper':
-    case 'surmatelas':
-      return sirvURL + 'topper.svg';
-    case 'Telaio inferiore':
-    case 'box':
-    case 'Untergestell':
-    case 'Box/Untergestell':
-    case 'BoxUntergestell':
-    case 'Box  Bettrahmen':
-    case 'box  cadre de lit':
-    case 'Box':
-    case 'Box inkl Grsse':
-      return sirvURL + 'bed_underframe.svg';
-    case 'Visualizzazione':
-    case 'visualisation':
-    case 'Visualisierung':
-      return sirvURL + 'bed_visualization.svg';
-    case 'Rivestimento':
-    case 'tissu dco':
-    case 'Bezug':
-    case 'Stoff':
-      return sirvURL + 'upholstery.svg';
-    case 'Sitz':
-    case 'Sitztiefe':
-      return sirvURL + 'seat.svg';
-    case 'Armlehne':
-      return sirvURL + 'armrest.svg';
-    case 'ACCESSOIRES':
-      return sirvURL + 'additionalArticles.svg';
-    case 'Rcken':
-      return sirvURL + 'sofaBackrest.svg';
-    case 'Konfiguration':
-      return sirvURL + 'material_config.svg';
-    case 'Zustand':
-      return sirvURL + 'settings_suggest.svg';
-  }
-  return undefined;
-};
-
-var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
-  var _getIconOfTabGroup;
-  var tabGroup = _ref.tabGroup,
-    height = _ref.height,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
-    isFirstItem = _ref.isFirstItem,
-    isLastItem = _ref.isLastItem,
-    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
-    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
-    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
-    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
-    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
-    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
-    _ref$wcStepIconClass = _ref.wcStepIconClass,
-    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
-    lastItemDiv = _ref.lastItemDiv;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var width = 128;
-  var tabGroupItemRef = useRef(null);
-  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
-  if (height < minHeight) {
-    height = minHeight;
-  }
-  var _useDivaCore = useDivaCore(),
-    baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
-  useEffect(function () {
-    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
-  }, [tabGroupItemRef]);
-  var onTabGroupClick = function onTabGroupClick(tabGroup) {
-    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
-  };
-  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
-  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
-  var polygonPoints;
-  if (isFirstItem && isLastItem) {
-    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
-  } else if (isFirstItem) {
-    polygonPoints = '0 ' + (height - 8) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', ' + '64 ' + height;
-  } else if (isLastItem) {
-    polygonPoints = '0 ' + height + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + height;
-  } else {
-    polygonPoints = '0 ' + (height - 8) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 8) + ', 64 ' + height;
-  }
-  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, baseCdnUrl, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
-  var div = /*#__PURE__*/jsxs("div", {
-    "data-test-id": "tabGroupItem",
-    children: [/*#__PURE__*/jsx("div", {
-      className: wcStepIconClass,
-      style: {
-        WebkitMaskImage: 'url(' + icon + ')',
-        maskImage: 'url(' + icon + ')'
-      }
-    }), /*#__PURE__*/jsx("span", {
-      "data-test-id": "tabGroupItemTitle",
-      children: t('configurator.' + tabGroup.title, tabGroup.title)
-    })]
-  });
-  if (isLastItem && lastItemDiv) {
-    div = lastItemDiv;
-  }
-  return /*#__PURE__*/jsxs("svg", {
-    "data-test-id": "tabGroupItemSvg",
-    viewBox: '0 0 ' + width + ' ' + height,
-    ref: tabGroupItemRef,
-    style: {
-      height: height + 'px',
-      minHeight: minHeight
-    },
-    onClick: function onClick() {
-      return onTabGroupClick(tabGroup);
-    },
-    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-    children: [/*#__PURE__*/jsx("polygon", {
-      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-      points: polygonPoints
-    }), /*#__PURE__*/jsx("foreignObject", {
-      width: "100%",
-      height: "100%",
-      style: {
-        pointerEvents: 'none'
-      },
-      children: /*#__PURE__*/jsx("span", {
-        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
-        children: div
-      })
-    })]
-  });
-};
-var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
-
-export { VerticalTabGroupItemStandard$1 as default };

package/build/esm/index-5f5161c2.js

@@ -1,94 +0,0 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
-import MetaData from './index-4007a01c.js';
-import InfoIcon from './index-76f82209.js';
-import PricePreview from './index-d7f64973.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var articleItem = "article-item-eh-j4";
-var wcVCodexText = "wcVCodexText-MyIlQ";
-var sel = "sel-84QKb";
-var imageWrapper = "imageWrapper-gvsu5";
-var wcImage = "wcImage-GYOFl";
-var titleWrapper = "titleWrapper-noaB3";
-var title = "title-79bZq";
-var wcArticleSize = "wcArticleSize--au3o";
-var css_248z = "/*Size Normal */\n\n.article-item-eh-j4 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.article-item-eh-j4:active,\n.article-item-eh-j4:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-MyIlQ {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.article-item-eh-j4:hover .wcVCodexText-MyIlQ,\n.sel-84QKb .wcVCodexText-MyIlQ {\n  display: block;\n}\n\n.imageWrapper-gvsu5 {\n  border-radius: 6px;\n  border: 1px rgb(230, 230, 230) solid;\n  flex-grow: 1;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.article-item-eh-j4:hover .imageWrapper-gvsu5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-84QKb.article-item-eh-j4:hover .imageWrapper-gvsu5,\n.small-Prl2V.sel-84QKb.article-item-eh-j4:hover .imageWrapper-gvsu5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-84QKb .imageWrapper-gvsu5,\n.small-Prl2V.sel-84QKb .imageWrapper-gvsu5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-GYOFl {\n  width: calc(100% - 8px);\n  border: 4px white solid;\n  background-color: #fff;\n  border-radius: 6px;\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  -o-object-fit: contain;\n     object-fit: contain;\n  background-color: #fff;\n}\n.sel-84QKb .wcImage-GYOFl,\n.small-Prl2V.sel-84QKb .wcImage-GYOFl {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-LvQOl {\n  width: 80px;\n  height: 80px;\n}\n\n.titleWrapper-noaB3 {\n  display: flex;\n  justify-content: center;\n  overflow: visible;\n  max-height: 48px;\n}\n\n.title-79bZq {\n  text-align: center;\n  width: 100%;\n  height: 48px;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 3;\n  transition: height 0.3s ease-out;\n}\n\n.article-item-eh-j4:hover .title-79bZq,\n.article-item-eh-j4:focus .title-79bZq,\n.small-Prl2V .article-item-eh-j4:hover .title-79bZq,\n.small-Prl2V .article-item-eh-j4:focus .title-79bZq {\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  -webkit-line-clamp: 30;\n  height: 72px;\n  z-index: 200;\n  background-color: var(--settingsBackgroundColor);\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  transition: height 0.3s ease-in;\n}\n\n/* Size Small */\n\n.small-Prl2V .wcVCodexText-MyIlQ {\n  font-size: 12px;\n}\n\n.small-Prl2V .title-79bZq {\n  font-size: 12px;\n  height: 15px;\n  -webkit-line-clamp: 1;\n}\n\n.small-Prl2V .titleWrapper-noaB3 {\n  max-height: 14px;\n}\n/* Size very Small */\n\n.very-small-L8DMH .wcVCodexText-MyIlQ {\n  font-size: 10px;\n}\n\n.very-small-L8DMH .title-79bZq {\n  font-size: 10px;\n  -webkit-line-clamp: 1;\n}\n\n.very-small-L8DMH .titleWrapper-noaB3 {\n  max-height: 20px;\n}\n\n/* Size big */\n\n.big-p6olT .wcVCodexText-MyIlQ {\n  font-size: 15px;\n}\n\n.big-p6olT .title-79bZq {\n  font-size: 15px;\n  -webkit-line-clamp: 2;\n}\n\n.article-item-eh-j4 .wcArticleSize--au3o {\n  bottom: 0px;\n  padding-bottom: 4px;\n  left: 0px;\n  padding-left: 4px;\n  padding-right: 4px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 11px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n  position: absolute;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 1;\n  width: calc(100% - 8px);\n  transition: opacity 0.3s ease;\n  background-color: rgba(255, 255, 255, 0.85);\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px;\n}\n\n.sel-84QKb .wcArticleSize--au3o {\n  bottom: 4px;\n  padding-bottom: 0px;\n  left: 4px;\n  padding-left: 4px;\n  padding-right: 4px;\n  width: calc(100% - 16px);\n  border-bottom-left-radius: 2px;\n  border-bottom-right-radius: 2px;\n}\n";
-styleInject(css_248z);
-
-var Article = function Article(_ref) {
-  var _viewHandler$settings;
-  var itemP = _ref.item,
-    paletteId = _ref.paletteId;
-  var item = itemP;
-  var viewHandler = useViewHandler();
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    metaDataVisible = _useState2[0],
-    setMetaDataVisible = _useState2[1];
-  var onClick = function onClick() {
-    viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
-  };
-  var isSelected = item.sel && ((_viewHandler$settings = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.mode) != 'add';
-  return /*#__PURE__*/jsxs("div", {
-    id: item.codex,
-    className: classnames(undefined, undefined, articleItem, isSelected ? sel : undefined),
-    onClick: onClick,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: classnames(imageWrapper),
-      children: [viewHandler.getViewConfig().showOptionCodexInOptionHeader && /*#__PURE__*/jsx("div", {
-        className: classnames(wcVCodexText),
-        children: item.articleCodex
-      }), item.image && /*#__PURE__*/jsx("img", {
-        className: classnames(wcImage),
-        src: item.image.replace('_gal', '').replace('_low', '') 
-      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
-        item: item
-      }, item.codex), /*#__PURE__*/jsx("div", {
-        className: classnames(wcArticleSize),
-        children: item.sizeInfo
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: titleWrapper,
-      children: /*#__PURE__*/jsx("div", {
-        className: title,
-        dangerouslySetInnerHTML: {
-          __html: item.title
-        }
-      })
-    }), /*#__PURE__*/jsx(MetaData, {
-      style: {
-        position: 'relative',
-        "float": 'left',
-        display: 'none'
-      },
-      metaData: item.metaData,
-      visible: [metaDataVisible, setMetaDataVisible]
-    }, item.codex), item.priceInfo !== undefined && /*#__PURE__*/jsx(PricePreview, {
-      price: item.price,
-      style: undefined
-    })]
-  });
-};
-var FaceLift = observer(Article);
-
-export { FaceLift as default };

package/build/esm/index-60b2e96e.js

@@ -1,66 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import SettingsHeader from './index-c704e2f0.js';
-import SettingsConfigSingle from './index-715d013a.js';
-import SettingsPosNr from './index-77eba4f9.js';
-import classnames from 'classnames';
-import { jsx, Fragment, jsxs } 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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-8b8f5a24.js';
-import 'react-laag';
-import './index-ba01b684.js';
-
-var wcConfiguratorSettingsFoldConfSettings = "wcConfigurator-settings-FoldConfSettings-hZych";
-var landscape = "landscape-LFbXM";
-var css_248z = ".wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 80%;\n  margin-left: 16px;\n  margin-right: 0px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: left;\n}\n\n.wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  right: 0px;\n  z-index: 700;\n  width: 16px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: var(--foldArrowMarginRight);\n\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n}\n\n.wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 83%;\n  margin-right: 24px;\n  margin-left: 0px;\n  margin-top: 14.4px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: right;\n}\n\n.landscape-LFbXM .wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  width: 16px;\n  right: 0px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: 16px;\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n  cursor: pointer;\n  z-index: 700;\n}\n";
-styleInject(css_248z);
-
-var SettingsHeaderContainer = function SettingsHeaderContainer(_ref) {
-  var _headerPalette$type, _headerPalette$type2;
-  var _ref$isScroller = _ref.isScroller,
-    isScroller = _ref$isScroller === void 0 ? false : _ref$isScroller;
-  var viewHandler = useViewHandler();
-  var headerPalette = viewHandler.settingsState.itemPalettes.get(1);
-  if (!headerPalette) return /*#__PURE__*/jsx(Fragment, {});
-  var showHeader = viewHandler.uiState.ViewConfig.headerInConfigPalette !== 'Hidden' && !((_headerPalette$type = headerPalette.type) !== null && _headerPalette$type !== void 0 && _headerPalette$type.startsWith('PRODUCTS')) && !((_headerPalette$type2 = headerPalette.type) !== null && _headerPalette$type2 !== void 0 && _headerPalette$type2.startsWith('PROMOTED')) && (!viewHandler.getIsInMobileView() || !viewHandler.uiState.ViewConfig.hideTopHeaderInMobile);
-  return /*#__PURE__*/jsxs("header", {
-    ref: function ref(_ref2) {
-      return viewHandler.settingsState.setHeaderElement(_ref2);
-    },
-    className: classnames(viewHandler.uiState.isMobileLandscape ? landscape : undefined),
-    children: [!viewHandler.uiState.ViewConfig.hideMobileFolder && !viewHandler.uiState.configSettingsIsHidden && viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
-      className: wcConfiguratorSettingsFoldConfSettings,
-      id: "btnFoldDown",
-      onClick: function onClick() {
-        return viewHandler.uiState.onClickHideConfigSettings();
-      }
-    }), showHeader && /*#__PURE__*/jsx(SettingsHeader, {
-      isInScroller: isScroller,
-      isSettingsHeader: !headerPalette.isHeader,
-      item: headerPalette,
-      specialElement1: viewHandler.settingsState.doShowActElementInfo && !viewHandler.uiState.ViewConfig.hideElementInfo ? /*#__PURE__*/jsx(SettingsPosNr, {}) : undefined,
-      specialElement2: viewHandler.settingsState.doShowConfigSingle ? /*#__PURE__*/jsx(SettingsConfigSingle, {}) : undefined
-    })]
-  });
-};
-var SettingsHeaderContainer$1 = observer(SettingsHeaderContainer);
-
-export { SettingsHeaderContainer$1 as default };

package/build/esm/index-61e15846.js

@@ -1,61 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2c954057.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import IsActive from './index-e16313bf.js';
-import InfoIcon from './index-76f82209.js';
-import { jsxs, 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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/widget-contact-form';
-
-var articleItem = "article-item-560hu";
-var wcSize = "wcSize-NqLig";
-var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-Tn0PY";
-var wcImage = "wcImage-ui7-N";
-var css_248z = "/*Planner*/\n\n.article-item-560hu {\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  float: left;\n}\n\n.article-item-560hu:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n.article-item-560hu:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.article-item-560hu:hover {\n  z-index: 200;\n}\n\n.article-item-560hu .wcSize-NqLig {\n  width: 100%;\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.article-item-560hu .wcConfigurator-settings-title-Tn0PY {\n  float: left;\n  margin-top: 11.2px;\n  margin-left: 11.2px;\n  max-width: calc(100% - 72px);\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.article-item-560hu .wcImage-ui7-N {\n  width: 60px;\n  height: 60px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px 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  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.article-item-560hu .wcConfigurator-settings-title-Tn0PY:hover {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  background: #fff;\n}\n";
-styleInject(css_248z);
-
-var PlannerSwitch = function PlannerSwitch(_ref) {
-  var itemP = _ref.item;
-  var item = itemP;
-  var viewHandler = useViewHandler();
-  return /*#__PURE__*/jsxs("div", {
-    className: classnames(articleItem),
-    onClick: function onClick() {
-      return viewHandler.paletteViewHandler.clickOnPlannerElementSwitch(item);
-    },
-    children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
-      item: item
-    }, item.articleCodex), /*#__PURE__*/jsxs("div", {
-      className: classnames(wcSize),
-      children: [/*#__PURE__*/jsx("div", {
-        className: classnames(wcImage),
-        style: {
-          backgroundImage: "url(".concat(item.image, ")")
-        },
-        title: item.title
-      }), /*#__PURE__*/jsx("div", {
-        className: classnames(wcConfiguratorSettingsTitle),
-        children: item.title
-      })]
-    })]
-  });
-};
-var PlannerSwitch$1 = observer(PlannerSwitch);
-
-export { PlannerSwitch$1 as default };