import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler, S as SettingsHeader, a as useAnalyzerComponents, M as MissingAnalyzerComponent } from './index-bbdfb97a.js';
import React, { useState, useRef, useEffect, Suspense, lazy, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import sift from 'sift';
import TextBox from './index-0d3bfd91.js';
import ItemVariant from './index-2b5bdfe1.js';
import SettingsPaletteGroup from './index-caff71dc.js';
import ToggleOption from './index-5cb692e9.js';
import GroupDropdown from './index-db439036.js';
import PromotedProducts from './index-bea5c228.js';
import StyleConsultant from './index-014a5003.js';
import ToggleName from './index-ce21cd4d.js';
import itemPaletteTypeComponentMap from './index-6a697eea.js';
import classnames from 'classnames';
import StepInfo from './index-ec31a7cb.js';
import ReplaceSwitch from './index-a253bbbf.js';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import Slider from './index-4ca1affe.js';
import MultiToggle from './index-c44088dc.js';
import Radio from './index-d5bb9bda.js';
import { useDivaCore } from '@crystaldesign/diva-core';
import SummaryOverview from './index-dd2aabd2.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

var collapsableInner = "collapsable-inner-YPvJa";
var css_248z$3 = ".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$3);

var wcConfiguratorConfigPaletteContainer = "wcConfigurator-ConfigPaletteContainer-uKDCv";
var description = "description-zBhwu";
var css_248z$2 = ".wcConfigurator-ConfigPaletteContainer-uKDCv {\n  width: 100%;\n  margin-bottom: 24px;\n  position: relative;\n}\n\n.description-zBhwu {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 12px;\n}\n";
styleInject(css_248z$2);

var horizontalGroup = "horizontal-group-394E3";
var horizontalGroupSwiper = "horizontal-group-swiper-Q0ZQF";
var css_248z$1 = ".horizontal-group-394E3.horizontal-group-swiper-Q0ZQF {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 4px;\n}\n\n/*navigation*/\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-slide {\n  width: auto;\n  width: initial;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-slide:first-child {\n  width: auto;\n  width: initial;\n  margin-left: 46px;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-slide:hover {\n  z-index: 1000;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  top: var(--swiper-navigation-top-offset, 50%);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--swiper-theme-color);\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev.swiper-button-disabled,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev.swiper-button-hidden,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-navigation-disabled .swiper-button-prev,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev svg,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next svg {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  transform-origin: center;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-prev svg,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev:after,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next:after {\n  text-transform: none !important;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev:after,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: var(--swiper-navigation-size);\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-prev:after,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-button-next:after,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-android .swiper-slide,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-autoheight,\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3.horizontal-group-swiper-Q0ZQF .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
styleInject(css_248z$1);

var HorizantalGroup = function HorizantalGroup(_ref) {
  var item = _ref.item,
    PaletteComponent = _ref.PaletteComponent;
  var elements = item.groups.flatMap(function (group) {
    return group.items;
  });
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    swiperRef = _useState2[0],
    setSwiperRef = _useState2[1];
  var selectedIdx = useRef(0);
  var viewHandler = useViewHandler();
  var navigateToOnClick = function navigateToOnClick(index) {
    var newIndex = index !== 0 ? index - 1 : index;
    selectedIdx.current = newIndex;
    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(newIndex);
  };
  useEffect(function () {
    if (swiperRef) {
      swiperRef.slideTo(selectedIdx.current, 0);
    }
  }, [swiperRef]);
  useEffect(function () {
    var index = elements.findIndex(function (e) {
      var _viewHandler$settings;
      return e.basketId == ((_viewHandler$settings = viewHandler.settingsState.addElementSelected) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.basketId);
    });
    if (index !== -1) {
      navigateToOnClick(index);
    }
  }, [viewHandler.settingsState.addElementSelected]);
  return /*#__PURE__*/jsx("div", {
    className: classnames(horizontalGroup, horizontalGroupSwiper),
    id: item.id.toString(),
    children: /*#__PURE__*/jsx(Swiper, {
      onSwiper: setSwiperRef,
      resizeObserver: true,
      modules: [Navigation],
      slidesPerView: 'auto',
      style: {
        width: 'fit-content'
      },
      spaceBetween: 8,
      scrollbar: true,
      slideToClickedSlide: true,
      wrapperClass: "no-swiping",
      children: elements.map(function (e, index) {
        return /*#__PURE__*/jsx(SwiperSlide, {
          onClick: function onClick(e) {
            navigateToOnClick(index);
            e.stopPropagation();
          },
          children: /*#__PURE__*/jsx(PaletteComponent, {
            paletteType: item.type,
            paletteId: item.id,
            item: e
          }, getKey(e))
        }, index);
      })
    })
  });
};
var HorizantalGroup$1 = observer(HorizantalGroup);

var index$3 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': HorizantalGroup$1
});

var wrapper = "wrapper-2fZg-";
var mobile = "mobile-qmoKd";
var tablet = "tablet-S3g-4";
var headerWrapper = "header-wrapper-RzSlX";
var css_248z = ".wrapper-2fZg- {\n  position: sticky;\n  top: 0px;\n  z-index: 1500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  width: 100%;\n  height: 148px;\n  pointer-events: none;\n}\n\n.wrapper-2fZg-.mobile-qmoKd:not(.tablet-S3g-4) {\n  top: 14px;\n  height: 108px;\n}\n\n.wrapper-2fZg-.tablet-S3g-4 {\n  top: 26px;\n}\n\n.header-wrapper-RzSlX {\n  background: var(--settingsBackgroundColor);\n  pointer-events: auto;\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n";
styleInject(css_248z);

var ArticleOverviewWrapper = function ArticleOverviewWrapper(props) {
  var viewHandler = useViewHandler();
  var item = viewHandler.settingsState.itemPalettes.get(1);
  if (!item) return /*#__PURE__*/jsx(Fragment, {});
  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
  var elements = item.groups.flatMap(function (group) {
    return group.items;
  });
  if (elements.length == 1) return /*#__PURE__*/jsx(Fragment, {});
  return /*#__PURE__*/jsx("div", {
    className: classnames(wrapper, viewHandler.uiState.isMobilePortrait ? mobile : undefined, viewHandler.uiState.isMobilePortrait && viewHandler.uiState.isTablet ? tablet : undefined),
    children: /*#__PURE__*/jsx("div", {
      className: headerWrapper,
      children: /*#__PURE__*/jsx(HorizantalGroup$1, {
        item: item,
        PaletteComponent: PaletteComponent
      })
    })
  });
};
var ArticleOverviewWrapper$1 = observer(ArticleOverviewWrapper);

var index$2 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': ArticleOverviewWrapper$1
});

function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ConceptFilter = /*#__PURE__*/lazy(function () {
  return import('./index-f73a47a2.js');
});
var ItemWrapper = function ItemWrapper(_ref) {
  var _item$conceptFilter;
  var item = _ref.item,
    style = _ref.style,
    children = _ref.children,
    zIndexBase = _ref.zIndexBase;
  var viewHandler = useViewHandler();
  var Header = !item.isHeader ? /*#__PURE__*/jsx(SettingsHeader, {
    isInScroller: true,
    isSettingsHeader: false,
    item: item
  }) : /*#__PURE__*/jsx(Fragment, {});
  var plannerArticles = item.type.startsWith('ART');
  var planner2Dot0 = plannerArticles && viewHandler.settingsState.planner2Dot0Active;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(wcConfiguratorConfigPaletteContainer, {
      wcFilterVisible: item.filterVisible
    }),
    ref: function ref(_ref2) {
      return item.htmlRef = _ref2;
    },
    id: item.configStepKey,
    style: _objectSpread$2(_objectSpread$2({}, style), {}, {
      zIndex: (zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : 0) + Math.round(100 / (item.id + 1))
    }),
    children: [!planner2Dot0 && Header, /*#__PURE__*/jsx(StepInfo, {
      stepInfo: item.info
    }), !!((_item$conceptFilter = item.conceptFilter) !== null && _item$conceptFilter !== void 0 && _item$conceptFilter.length) && /*#__PURE__*/jsx(Suspense, {
      fallback: /*#__PURE__*/jsx(Fragment, {}),
      children: /*#__PURE__*/jsx(ConceptFilter, {
        additionalGroupFilter: item.conceptFilter,
        paletteId: item.id
      })
    }), planner2Dot0 && /*#__PURE__*/jsx(ArticleOverviewWrapper$1, {}), item.description && /*#__PURE__*/jsx("div", {
      className: description,
      dangerouslySetInnerHTML: {
        __html: item.description
      }
    }), plannerArticles && !planner2Dot0 && viewHandler.settingsState.doShowReplaceMode && (!viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements || item.id == 2) && /*#__PURE__*/jsx(ReplaceSwitch, {}), planner2Dot0 && Header, children]
  });
};
var ItemWrapper$1 = observer(ItemWrapper);

var index$1 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': ItemWrapper$1
});

function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useGridVariables = function useGridVariables(item) {
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    dimensions = _useDivaCore.state.dimensions;
  var variables = useMemo(function () {
    var _viewHandler$uiState$, _viewHandler$settings, _viewHandler$settings2, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2;
    //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 settingsContainerWidth = (_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().width) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0;
    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 (['SUMMARY_ARTICLES', 'SUMMARY_OPTIONTREE', 'VARIANTS'].includes(item.type)) {
      gridSize = 'calc(100% - 20px)';
    } else if (['GAL_GROUP_DROPDOWN', 'GAL_BIG'].includes(item.type)) {
      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 == '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 === 'VERY_SMALL') {
      gridSize = '48%';
    } else if (item.type == 'GAL_TEXT_2') {
      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '90px';else gridSize = '70px';
    } else if (item.type == 'GAL_TEXT' || item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
      if (settingsContainerWidth > 700) gridSize = '100px';else if (settingsContainerWidth > 550) gridSize = '100px';else if (settingsContainerWidth > 400 || !viewHandler.uiState.isInMobileView) gridSize = '90px';else gridSize = '80px';
    } else if (item.type == 'GAL_BIG_TEXT_2') {
      if (settingsContainerWidth > 700) gridSize = '190px';else if (settingsContainerWidth > 550) gridSize = '170px';else if (settingsContainerWidth > 400) gridSize = '145px';else gridSize = '130px';
    } else if (item.type == 'GAL_BIG_TEXT') {
      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '110px';else gridSize = '100px';
    } else if (['GAL_SMALL_TEXT_2', 'PLANNER_2.0', 'ART_2'].includes(item.type)) {
      if (settingsContainerWidth > 700) gridSize = '105px';else if (settingsContainerWidth > 550) gridSize = '95px';else if (settingsContainerWidth > 400) gridSize = '80px';else gridSize = '70px';
      gridGap = '8px';
    } else if (item.type == 'GAL_SMALL_TEXT') {
      if (settingsContainerWidth > 700) gridSize = '75px';else if (settingsContainerWidth > 550) gridSize = '70px';else if (settingsContainerWidth > 400) gridSize = '55px';else gridSize = '50px';
      gridGap = '6px';
    } else if (item.type == 'GAL_VERY_SMALL_TEXT') {
      gridSize = '60px';
      gridGap = '6px';
    } else if (item.type.startsWith('GAL_SMALL')) {
      gridSize = '60px';
    }
    if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
      infoIconSize = '20px';
    }
    return _objectSpread$1({
      '--gridSize': gridSize,
      '--gridGap': gridGap
    }, infoIconSize ? {
      '--infoIconSize': infoIconSize
    } : {});
  }, [item, viewHandler.uiState.ViewConfig.settingsSizes, viewHandler.settingsState.settingsScrollerElement, dimensions]);
  return variables;
};

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-51565938.js');
});
var DoorPlanner = /*#__PURE__*/React.lazy(function () {
  return import('./index-f5b43efc.js');
});
var ProductList = /*#__PURE__*/React.lazy(function () {
  return import('./index-64db3202.js');
});
var INSPECT_MODE_EXCEPTIONS = ['SHELFPLANNER', 'PLANNER_2.0', 'CHECKOUT', 'PRODUCTS', 'PROMOTED', 'STYLE_CONSULTANT', 'DOOR_PLANNER', 'SUMMARY', 'SUMMARY_OPTIONTREE', 'SUMMARY_ARTICLES', 'VARIANTS'];
var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
  var _item$groups$;
  var item = _ref.item,
    zIndexBase = _ref.zIndexBase;
  var viewHandler = useViewHandler();
  var analyzerComponents = useAnalyzerComponents();
  var variables = useGridVariables(item);
  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;
  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
  var inspectMode = viewHandler.wysiwygDebugState.wysiwygInspectView;
  if (inspectMode && !INSPECT_MODE_EXCEPTIONS.includes(item.type)) {
    var InspectModeTables = analyzerComponents.InspectModeTables;
    if (!InspectModeTables) return /*#__PURE__*/jsx(MissingAnalyzerComponent, {
      name: "InspectModeTables"
    });
    return /*#__PURE__*/jsx(InspectModeTables, {
      item: item
    });
  }
  switch (item.type) {
    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]
      }, item.id + item.configStepKey);
    case 'SLIDER':
      return /*#__PURE__*/jsx(Slider, {
        style: variables,
        item: item,
        paletteId: item.id
      });
    case 'MULTI_TOGGLE':
    case 'MULTI_TOGGLE_ROUND':
      return /*#__PURE__*/jsx(MultiToggle, {
        style: variables,
        item: item,
        paletteId: item.id,
        round: item.type === 'MULTI_TOGGLE_ROUND'
      });
    case 'RADIO':
    case 'RADIO_LIST':
      return /*#__PURE__*/jsx(Radio, {
        style: variables,
        item: item,
        paletteId: item.id,
        displayMode: item.type === 'RADIO' ? 'boxed' : 'list'
      });
    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 'PLANNER_2.0':
      //is rendered with the articleoverviewwrapper
      return /*#__PURE__*/jsx(Fragment, {});
    case 'CHECKOUT':
      return /*#__PURE__*/jsx(SummaryOverview, {}, item.id);
    case 'PRODUCTS':
      return /*#__PURE__*/jsx(ProductList, {
        item: item
      });
    case 'PROMOTED':
      return /*#__PURE__*/jsx(PromotedProducts, {
        item: item
      });
    case 'STYLE_CONSULTANT':
      return /*#__PURE__*/jsx(StyleConsultant, {
        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$1, {
        style: variables,
        item: item,
        children: childGroup,
        zIndexBase: zIndexBase
      });
    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$1, {
        style: variables,
        item: item,
        children: children,
        zIndexBase: zIndexBase
      });
  }
};
var getKey = function getKey(item) {
  var _ref2, _ref3, _ref4, _item$basketId;
  if (item.isTabGroup) return item.tabgroupName + item.title;
  return (_ref2 = (_ref3 = (_ref4 = (_item$basketId = item.basketId) !== null && _item$basketId !== void 0 ? _item$basketId : item.codex) !== null && _ref4 !== void 0 ? _ref4 : 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, index$2 as a, index$1 as b, collapsableInner as c, index as d, getKey as g, index$3 as i };
