{"version":3,"sources":["webpack:///./node_modules/core-js/internals/object-to-array.js","webpack:///./node_modules/core-js/modules/es.object.values.js","webpack:///./node_modules/core-js/modules/es.object.entries.js","webpack:///./resources/js/src/app/components/item/VariationSelect.vue?7935","webpack:///resources/js/src/app/components/item/VariationSelect.vue","webpack:///./resources/js/src/app/components/item/VariationSelect.vue?68f5","webpack:///./resources/js/src/app/components/item/VariationSelect.vue"],"names":["DESCRIPTORS","uncurryThis","objectKeys","toIndexedObject","propertyIsEnumerable","f","push","createMethod","TO_ENTRIES","it","key","O","keys","length","i","result","module","exports","entries","values","$","$values","target","stat","$entries","render","_vm","this","_h","$createElement","_c","_self","staticClass","attributes","possibleUnitCombinationIds","isContentVisible","_l","attribute","index","class","attributeId","_v","_s","name","attrs","ref","refInFor","alt","title","_e","type","id","on","change","$event","selectAttribute","value","addPleaseSelectOption","hasSelection","domProps","$translate","hasEmptyOption","selectedAttributes","selected","attributeValueId","isAttributeSelectionValid","images","directives","rawName","expression","active","invalid","getTooltip","click","imageUrl","src","innerHTML","selectUnit","unitCombinationId","parseInt","selectedUnit","isUnitSelectionValid","possibleUnits","for","_m","_t","_withStripped","props","forceContent","default","inject","itemId","data","filteredVariationsCache","lastContentCount","mounted","computed","currentVariation","currentVariationSelect","currentSelection","variation","variations","methods","unitId","onSelectionChange","unsetInvalidSelection","attributeValue","getInvalidOptionTooltip","invalidSelections","invalidSelection","names","getQualifiedVariations","getClosestVariations","qualifiedVariations","changes","closestSalableVariation","numberOfSalableChanges","closestNonSalableVariation","numberOfNonSalableChanges","getInvalidSelectionByVariation","selectedAttributeId","attributesToReset","newUnit","correctSelection","attributeToReset","messages","NotificationService","closeAfter","filterVariations","strict","ignoreUnit","variationAttribute","filterSalableVariations","filter","setVariation","variationId","document","detail","documents","isTextCut","content","getSelectedAttributeValueName","transformPossibleUnits","unitA","unitB","splitUnitName","unitName","unitNameSplit","watch","component","tabindex","role"],"mappings":"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","file":"chunks/ceres-client-5.min.js","sourcesContent":["var DESCRIPTORS = require('../internals/descriptors');\nvar uncurryThis = require('../internals/function-uncurry-this');\nvar objectKeys = require('../internals/object-keys');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar $propertyIsEnumerable = require('../internals/object-property-is-enumerable').f;\n\nvar propertyIsEnumerable = uncurryThis($propertyIsEnumerable);\nvar push = uncurryThis([].push);\n\n// `Object.{ entries, values }` methods implementation\nvar createMethod = function (TO_ENTRIES) {\n  return function (it) {\n    var O = toIndexedObject(it);\n    var keys = objectKeys(O);\n    var length = keys.length;\n    var i = 0;\n    var result = [];\n    var key;\n    while (length > i) {\n      key = keys[i++];\n      if (!DESCRIPTORS || propertyIsEnumerable(O, key)) {\n        push(result, TO_ENTRIES ? [key, O[key]] : O[key]);\n      }\n    }\n    return result;\n  };\n};\n\nmodule.exports = {\n  // `Object.entries` method\n  // https://tc39.es/ecma262/#sec-object.entries\n  entries: createMethod(true),\n  // `Object.values` method\n  // https://tc39.es/ecma262/#sec-object.values\n  values: createMethod(false)\n};\n","var $ = require('../internals/export');\nvar $values = require('../internals/object-to-array').values;\n\n// `Object.values` method\n// https://tc39.es/ecma262/#sec-object.values\n$({ target: 'Object', stat: true }, {\n  values: function values(O) {\n    return $values(O);\n  }\n});\n","var $ = require('../internals/export');\nvar $entries = require('../internals/object-to-array').entries;\n\n// `Object.entries` method\n// https://tc39.es/ecma262/#sec-object.entries\n$({ target: 'Object', stat: true }, {\n  entries: function entries(O) {\n    return $entries(O);\n  }\n});\n","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { staticClass: \"row\" },\n    [\n      _vm.attributes.length ||\n      (_vm.possibleUnitCombinationIds.length > 1 && _vm.isContentVisible)\n        ? [\n            _vm._l(_vm.attributes, function (attribute, index) {\n              return _c(\n                \"div\",\n                {\n                  key: index,\n                  staticClass: \"col-12 variation-select\",\n                  class: \"attribute\" + attribute.attributeId,\n                },\n                [\n                  _c(\"div\", { staticClass: \"attributeInfoWrapper \" }, [\n                    _c(\"p\", [\n                      _c(\n                        \"span\",\n                        { staticClass: \"position-relative\" },\n                        [\n                          _vm._v(\n                            \"\\n                        \" +\n                              _vm._s(attribute.name) +\n                              \"\\n                        \"\n                          ),\n                          attribute.attributeId == 114 ||\n                          attribute.attributeId == 113\n                            ? [\n                                _c(\n                                  \"span\",\n                                  {\n                                    staticClass: \"openInfoModal\",\n                                    attrs: {\n                                      \"data-modaltitle\":\n                                        \"modalTitle\" + attribute.attributeId,\n                                      \"data-modaltext\":\n                                        \"modalText\" + attribute.attributeId,\n                                    },\n                                  },\n                                  [\n                                    _c(\"lazy-img\", {\n                                      ref: \"itemLazyImage\",\n                                      refInFor: true,\n                                      attrs: {\n                                        \"picture-class\": \"\",\n                                        \"image-url\":\n                                          \" https://cdn02.plentymarkets.com/4tnz2nlw17zy/frontend/Icons/Kosmetikspiegel_Attributeinfo.svg\",\n                                        alt: attribute.name,\n                                        title: attribute.name,\n                                      },\n                                    }),\n                                  ],\n                                  1\n                                ),\n                              ]\n                            : _vm._e(),\n                        ],\n                        2\n                      ),\n                    ]),\n                  ]),\n                  _vm._v(\" \"),\n                  attribute.type === \"dropdown\"\n                    ? _c(\n                        \"div\",\n                        {\n                          ref: \"attributesContaner\",\n                          refInFor: true,\n                          staticClass: \"input-unit dropdownUnit\",\n                        },\n                        [\n                          _c(\n                            \"select\",\n                            {\n                              staticClass: \"custom-select\",\n                              attrs: {\n                                id: \"custom-select_\" + attribute.name,\n                                \"data-testing\": \"variation-select-dropdown\",\n                              },\n                              on: {\n                                change: function ($event) {\n                                  return _vm.selectAttribute(\n                                    attribute.attributeId,\n                                    $event.target.value\n                                  )\n                                },\n                              },\n                            },\n                            [\n                              _vm.addPleaseSelectOption || !_vm.hasSelection\n                                ? _c(\"option\", { domProps: { value: -1 } }, [\n                                    _vm._v(\n                                      _vm._s(\n                                        _vm.$translate(\n                                          \"Ceres::Template.singleItemPleaseSelect\"\n                                        )\n                                      )\n                                    ),\n                                  ])\n                                : _vm._e(),\n                              _vm._v(\" \"),\n                              _vm.hasEmptyOption ||\n                              _vm.selectedAttributes[attribute.attributeId] ===\n                                null\n                                ? _c(\n                                    \"option\",\n                                    {\n                                      domProps: {\n                                        value: null,\n                                        selected:\n                                          _vm.selectedAttributes[\n                                            attribute.attributeId\n                                          ] === null,\n                                      },\n                                    },\n                                    [\n                                      _vm._v(\n                                        _vm._s(\n                                          _vm.$translate(\n                                            \"Ceres::Template.singleItemNoSelection\"\n                                          )\n                                        )\n                                      ),\n                                    ]\n                                  )\n                                : _vm._e(),\n                              _vm._v(\" \"),\n                              _vm._l(attribute.values, function (value) {\n                                return _c(\n                                  \"option\",\n                                  {\n                                    key: value.attributeValueId,\n                                    domProps: {\n                                      value: value.attributeValueId,\n                                      selected:\n                                        value.attributeValueId ===\n                                        _vm.selectedAttributes[\n                                          attribute.attributeId\n                                        ],\n                                    },\n                                  },\n                                  [\n                                    _vm.isAttributeSelectionValid(\n                                      attribute.attributeId,\n                                      value.attributeValueId,\n                                      true\n                                    )\n                                      ? [\n                                          _vm._v(\n                                            \"\\n                            \" +\n                                              _vm._s(value.name) +\n                                              \"\\n                        \"\n                                          ),\n                                        ]\n                                      : _vm.isAttributeSelectionValid(\n                                          attribute.attributeId,\n                                          value.attributeValueId,\n                                          false\n                                        )\n                                      ? [\n                                          _vm._v(\n                                            \"\\n                            \" +\n                                              _vm._s(\n                                                _vm.$translate(\n                                                  \"Ceres::Template.singleItemNotSalableAttribute\",\n                                                  { name: value.name }\n                                                )\n                                              ) +\n                                              \"\\n                        \"\n                                          ),\n                                        ]\n                                      : [\n                                          _vm._v(\n                                            \"\\n                            \" +\n                                              _vm._s(\n                                                _vm.$translate(\n                                                  \"Ceres::Template.singleItemInvalidAttribute\",\n                                                  { name: value.name }\n                                                )\n                                              ) +\n                                              \"\\n                        \"\n                                          ),\n                                        ],\n                                  ],\n                                  2\n                                )\n                              }),\n                            ],\n                            2\n                          ),\n                        ]\n                      )\n                    : attribute.type === \"box\" || attribute.type === \"image\"\n                    ? _c(\"div\", { staticClass: \"attributeRow\" }, [\n                        _c(\n                          \"div\",\n                          {\n                            staticClass: \"v-s-boxes\",\n                            class: { images: attribute.type === \"image\" },\n                          },\n                          _vm._l(attribute.values, function (value) {\n                            return _c(\n                              \"div\",\n                              {\n                                directives: [\n                                  {\n                                    name: \"tooltip\",\n                                    rawName: \"v-tooltip\",\n                                    value: true,\n                                    expression: \"true\",\n                                  },\n                                ],\n                                key: value.attributeValueId,\n                                staticClass: \"v-s-box bg-white\",\n                                class: {\n                                  active:\n                                    value.attributeValueId ===\n                                    _vm.selectedAttributes[\n                                      attribute.attributeId\n                                    ],\n                                  invalid: !_vm.isAttributeSelectionValid(\n                                    attribute.attributeId,\n                                    value.attributeValueId,\n                                    true\n                                  ),\n                                },\n                                attrs: {\n                                  \"data-testing\": \"variation-select-box\",\n                                  \"data-html\": \"true\",\n                                  \"data-toggle\": \"tooltip\",\n                                  \"data-placement\": \"top\",\n                                  \"data-original-title\": _vm.getTooltip(\n                                    attribute,\n                                    value\n                                  ),\n                                },\n                                on: {\n                                  click: function ($event) {\n                                    return _vm.selectAttribute(\n                                      attribute.attributeId,\n                                      value.attributeValueId\n                                    )\n                                  },\n                                },\n                              },\n                              [\n                                _c(\n                                  \"div\",\n                                  { staticClass: \"attrSelectWrapper\" },\n                                  [\n                                    value.imageUrl.length > 0\n                                      ? [\n                                          _c(\n                                            \"div\",\n                                            { staticClass: \"attrImgWrapper\" },\n                                            [\n                                              _c(\"img\", {\n                                                staticClass: \"attributeImage\",\n                                                attrs: {\n                                                  src: value.imageUrl,\n                                                  alt: value.name,\n                                                },\n                                              }),\n                                            ]\n                                          ),\n                                        ]\n                                      : _vm._e(),\n                                    _vm._v(\" \"),\n                                    _c(\n                                      \"div\",\n                                      { staticClass: \"attrTextWrapper\" },\n                                      [\n                                        _c(\n                                          \"div\",\n                                          { staticClass: \"mobileValueWrapper\" },\n                                          [\n                                            _c(\"div\", [\n                                              _c(\"span\", [\n                                                _vm._v(\n                                                  \"\\n                                            \" +\n                                                    _vm._s(value.name) +\n                                                    \"\\n                                        \"\n                                                ),\n                                              ]),\n                                            ]),\n                                          ]\n                                        ),\n                                      ]\n                                    ),\n                                  ],\n                                  2\n                                ),\n                              ]\n                            )\n                          }),\n                          0\n                        ),\n                      ])\n                    : _vm._e(),\n                  _vm._v(\" \"),\n                  attribute.attributeId == 113\n                    ? [\n                        _c(\n                          \"div\",\n                          {\n                            staticClass: \"attribueInfoContent\",\n                            class: \"modalContent\" + attribute.attributeId,\n                          },\n                          [\n                            _c(\n                              \"span\",\n                              { class: \"modalTitle\" + attribute.attributeId },\n                              [\n                                _vm._v(\n                                  _vm._s(\n                                    _vm.$translate(\n                                      \"ZeitloungeTheme::Template.itemAttributesModalHeading113\"\n                                    )\n                                  )\n                                ),\n                              ]\n                            ),\n                            _vm._v(\" \"),\n                            _c(\"div\", {\n                              class: \"modalText\" + attribute.attributeId,\n                              domProps: {\n                                innerHTML: _vm._s(\n                                  _vm.$translate(\n                                    \"ZeitloungeTheme::Template.itemAttributesModalText113\"\n                                  )\n                                ),\n                              },\n                            }),\n                          ]\n                        ),\n                      ]\n                    : _vm._e(),\n                  _vm._v(\" \"),\n                  attribute.attributeId == 114\n                    ? [\n                        _c(\n                          \"div\",\n                          {\n                            staticClass: \"attribueInfoContent\",\n                            class: \"modalContent\" + attribute.attributeId,\n                          },\n                          [\n                            _c(\n                              \"span\",\n                              { class: \"modalTitle\" + attribute.attributeId },\n                              [\n                                _vm._v(\n                                  _vm._s(\n                                    _vm.$translate(\n                                      \"ZeitloungeTheme::Template.itemAttributesModalHeading114\"\n                                    )\n                                  )\n                                ),\n                              ]\n                            ),\n                            _vm._v(\" \"),\n                            _c(\"div\", {\n                              class: \"modalText\" + attribute.attributeId,\n                              domProps: {\n                                innerHTML: _vm._s(\n                                  _vm.$translate(\n                                    \"ZeitloungeTheme::Template.itemAttributesModalText114\"\n                                  )\n                                ),\n                              },\n                            }),\n                          ]\n                        ),\n                      ]\n                    : _vm._e(),\n                ],\n                2\n              )\n            }),\n            _vm._v(\" \"),\n            _vm.possibleUnitCombinationIds.length > 1 && _vm.isContentVisible\n              ? _c(\"div\", { staticClass: \"col-12 variation-select\" }, [\n                  _c(\"div\", { staticClass: \"input-unit\" }, [\n                    _c(\n                      \"select\",\n                      {\n                        staticClass: \"custom-select\",\n                        attrs: {\n                          id: \"unit-combination-ids-select\",\n                          \"data-testing\": \"variation-select-unit\",\n                        },\n                        on: {\n                          change: function ($event) {\n                            return _vm.selectUnit($event.target.value)\n                          },\n                        },\n                      },\n                      _vm._l(\n                        _vm.possibleUnitCombinationIds,\n                        function (unitCombinationId) {\n                          return _c(\n                            \"option\",\n                            {\n                              key: unitCombinationId,\n                              domProps: {\n                                value: unitCombinationId,\n                                selected:\n                                  parseInt(unitCombinationId) ===\n                                  _vm.selectedUnit,\n                              },\n                            },\n                            [\n                              _vm.isUnitSelectionValid(unitCombinationId)\n                                ? [\n                                    _vm._v(\n                                      \"\\n                            \" +\n                                        _vm._s(\n                                          _vm.possibleUnits[unitCombinationId]\n                                        ) +\n                                        \"\\n                        \"\n                                    ),\n                                  ]\n                                : [\n                                    _vm._v(\n                                      \"\\n                            \" +\n                                        _vm._s(\n                                          _vm.$translate(\n                                            \"Ceres::Template.singleItemInvalidAttribute\",\n                                            {\n                                              name: _vm.possibleUnits[\n                                                unitCombinationId\n                                              ],\n                                            }\n                                          )\n                                        ) +\n                                        \"\\n                        \"\n                                    ),\n                                  ],\n                            ],\n                            2\n                          )\n                        }\n                      ),\n                      0\n                    ),\n                    _vm._v(\" \"),\n                    _c(\n                      \"label\",\n                      {\n                        attrs: {\n                          for: \"unit-combination-ids-select\",\n                          \"data-testing\": \"variation-select-unit-label\",\n                        },\n                      },\n                      [\n                        _vm._v(\n                          _vm._s(\n                            _vm.$translate(\"Ceres::Template.singleItemContent\")\n                          )\n                        ),\n                      ]\n                    ),\n                  ]),\n                ])\n              : _vm._e(),\n            _vm._v(\" \"),\n            _vm._m(0),\n          ]\n        : [_vm._t(\"default\")],\n    ],\n    2\n  )\n}\nvar staticRenderFns = [\n  function () {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"modal fade attributeSelectModal\",\n        attrs: {\n          tabindex: \"-1\",\n          role: \"dialog\",\n          \"aria-labelledby\": \"attributeSelectModal\",\n          \"aria-hidden\": \"true\",\n        },\n      },\n      [\n        _c(\"div\", { staticClass: \"modal-dialog modal-lg\" }, [\n          _c(\"div\", { staticClass: \"modal-content\" }, [\n            _c(\"div\", { staticClass: \"modal-header \" }, [\n              _c(\"h5\", { staticClass: \"modal-title \" }, [\n                _c(\"b\", { staticClass: \"attributeModalTitle\" }),\n              ]),\n              _vm._v(\" \"),\n              _c(\n                \"button\",\n                {\n                  staticClass: \"close\",\n                  attrs: {\n                    type: \"button\",\n                    \"data-dismiss\": \"modal\",\n                    \"aria-label\": \"Close\",\n                  },\n                },\n                [\n                  _c(\"span\", { attrs: { \"aria-hidden\": \"true\" } }, [\n                    _vm._v(\"×\"),\n                  ]),\n                ]\n              ),\n            ]),\n            _vm._v(\" \"),\n            _c(\"div\", { staticClass: \"modal-body \" }, [\n              _c(\"p\", { staticClass: \"attributeModalText mb-0\" }),\n            ]),\n          ]),\n        ]),\n      ]\n    )\n  },\n]\nrender._withStripped = true\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"row\">\n        <template v-if=\"attributes.length || (possibleUnitCombinationIds.length > 1 && isContentVisible)\">\n            <!--<div class=\"col-12\">\n                \n                <div class=\"attributesHeaderWrapper\">\n                    <span class=\"attributesHeader\">\n                        {{ $translate(\"ZeitloungeTheme::Template.itemAttributesHeader\") }}\n                    </span>\n                    <span class=\"attributesHeaderLine\">\n\n                    </span>\n                </div>\n                \n            </div>-->\n\n            <div class=\"col-12 variation-select\" v-for=\"(attribute, index) in attributes\" :key=\"index\" :class=\"'attribute' + attribute.attributeId\">\n                <!-- dropdown -->\n                <div class=\"attributeInfoWrapper \">\n                    <p>\n                        <span class=\"position-relative\">\n                            {{ attribute.name }}\n                            <template v-if=\"attribute.attributeId == 114 || attribute.attributeId == 113\">                                \n                                <span class=\"openInfoModal\"  :data-modaltitle=\"'modalTitle' + attribute.attributeId\" :data-modaltext=\"'modalText' + attribute.attributeId\">\n                                    <lazy-img ref=\"itemLazyImage\" picture-class=\"\"  image-url=\" https://cdn02.plentymarkets.com/4tnz2nlw17zy/frontend/Icons/Kosmetikspiegel_Attributeinfo.svg\" :alt=\"attribute.name\" :title=\"attribute.name\"  ></lazy-img>\n                                </span>\n                            </template>\n                        </span>\n                    </p>                     \n                </div>\n\n                <div class=\"input-unit dropdownUnit\" ref=\"attributesContaner\" v-if=\"attribute.type === 'dropdown'\">\n\n                    <select :id=\"'custom-select_' + attribute.name\" class=\"custom-select\" @change=\"selectAttribute(attribute.attributeId, $event.target.value)\" data-testing=\"variation-select-dropdown\">\n                        <option :value=\"-1\" v-if=\"addPleaseSelectOption || !hasSelection\">{{ $translate(\"Ceres::Template.singleItemPleaseSelect\") }}</option>\n                        <option\n                                :value=\"null\" v-if=\"hasEmptyOption || selectedAttributes[attribute.attributeId] === null\"\n                                :selected=\"selectedAttributes[attribute.attributeId] === null\">{{ $translate(\"Ceres::Template.singleItemNoSelection\") }}</option>\n                        <option\n                                v-for=\"value in attribute.values\"\n                                :value=\"value.attributeValueId\"\n                                :selected=\"value.attributeValueId === selectedAttributes[attribute.attributeId]\"\n                                :key=\"value.attributeValueId\">\n                            <template v-if=\"isAttributeSelectionValid(attribute.attributeId, value.attributeValueId, true)\">\n                                {{ value.name }}\n                            </template>\n                            <template v-else-if=\"isAttributeSelectionValid(attribute.attributeId, value.attributeValueId, false)\">\n                                {{ $translate(\"Ceres::Template.singleItemNotSalableAttribute\", { \"name\": value.name }) }}\n                            </template>\n                            <template v-else>\n                                {{ $translate(\"Ceres::Template.singleItemInvalidAttribute\", { \"name\": value.name }) }}\n                            </template>\n                        </option>\n                    </select>\n                    <!--\n                    <label :for=\"'custom-select_' + attribute.name\" v-tooltip=\"isTextCut(attribute.name)\" data-toggle=\"tooltip\" data-placement=\"top\" :title=\"attribute.name\" data-testing=\"variation-select-dropdown-label\">{{ attribute.name }}</label>\n                    -->\n                </div>\n                <!-- /dropdown -->\n\n                <!-- box and image -->\n                <div v-else-if=\"attribute.type === 'box' || attribute.type === 'image'\" class=\"attributeRow\">\n                    \n                    <div class=\"v-s-boxes\" :class=\"{ 'images': attribute.type === 'image' }\">\n                        <!--\n                        <div class=\"v-s-box bg-white empty-option\"\n                             data-testing=\"variation-select-box\"\n                             v-if=\"addPleaseSelectOption\"\n                             @click=\"selectAttribute(attribute.attributeId, -1)\"\n                             :class=\"{ 'active': selectedAttributes[attribute.attributeId] === -1, 'invalid': !isAttributeSelectionValid(attribute.attributeId, -1) }\">\n                            <span class=\"attribteValue\">{{ $translate(\"Ceres::Template.singleItemPleaseSelect\") }}</span>\n                        </div>\n                        <div class=\"v-s-box bg-white empty-option\"\n                             data-testing=\"variation-select-box\"\n                             v-if=\"hasEmptyOption\"\n                             @click=\"selectAttribute(attribute.attributeId, null)\"\n                             :class=\"{ 'active': selectedAttributes[attribute.attributeId] === null, 'invalid': !isAttributeSelectionValid(attribute.attributeId, null, true) }\">\n                            <span class=\"attribteValue\">{{ $translate(\"Ceres::Template.singleItemNoSelection\") }}</span>\n                        </div>-->\n\n                        <div class=\"v-s-box bg-white\"\n                             data-testing=\"variation-select-box\"\n                             v-for=\"value in attribute.values\"\n                             @click=\"selectAttribute(attribute.attributeId, value.attributeValueId)\"\n                             :class=\"{ 'active': value.attributeValueId === selectedAttributes[attribute.attributeId], 'invalid': !isAttributeSelectionValid(attribute.attributeId, value.attributeValueId, true) }\"\n                             v-tooltip=\"true\" data-html=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" :data-original-title=\"getTooltip(attribute, value)\"\n                             :key=\"value.attributeValueId\">\n                            <div class=\"attrSelectWrapper\">\n                                <template v-if=\"value.imageUrl.length > 0\">\n                                    <div class=\"attrImgWrapper\">\n                                        <img class=\"attributeImage\" :src=\"value.imageUrl\" :alt=\"value.name\">\n                                        \n                                    </div>\n                                </template>\n                        \n                                <div class=\"attrTextWrapper\">\n                                    <div class=\"mobileValueWrapper\">\n                                        <div>\n                                            <span>\n                                                {{ value.name }}\n                                            </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>                        \n                        </div>\n                    </div>\n                </div>\n                <!-- /box and image -->\n                 <template v-if=\"attribute.attributeId == 113\">\n                    <div class=\"attribueInfoContent\" :class=\"'modalContent' + attribute.attributeId\">\n                        <span :class=\"'modalTitle' + attribute.attributeId\">{{ $translate(\"ZeitloungeTheme::Template.itemAttributesModalHeading113\") }}</span>\n                        <div :class=\"'modalText' + attribute.attributeId\"   v-html=\"$translate('ZeitloungeTheme::Template.itemAttributesModalText113')\"></div>\n                    </div> \n                </template>\n                <template v-if=\"attribute.attributeId == 114\">\n                    <div class=\"attribueInfoContent\" :class=\"'modalContent' + attribute.attributeId\">\n                        <span :class=\"'modalTitle' + attribute.attributeId\">{{ $translate(\"ZeitloungeTheme::Template.itemAttributesModalHeading114\") }}</span>\n                        <div :class=\"'modalText' + attribute.attributeId\"   v-html=\"$translate('ZeitloungeTheme::Template.itemAttributesModalText114')\"></div>\n                    </div> \n                </template>\n            </div>\n\n            <!-- units -->\n            <div class=\"col-12 variation-select\" v-if=\"possibleUnitCombinationIds.length > 1 && isContentVisible\">\n                <div class=\"input-unit\">\n                    <select id=\"unit-combination-ids-select\" class=\"custom-select\" @change=\"selectUnit($event.target.value)\" data-testing=\"variation-select-unit\">\n                        <option\n                                v-for=\"unitCombinationId in possibleUnitCombinationIds\"\n                                :value=\"unitCombinationId\"\n                                :selected=\"parseInt(unitCombinationId) === selectedUnit\"\n                                :key=\"unitCombinationId\">\n                            <template v-if=\"isUnitSelectionValid(unitCombinationId)\">\n                                {{ possibleUnits[unitCombinationId] }}\n                            </template>\n                            <template v-else>\n                                {{ $translate(\"Ceres::Template.singleItemInvalidAttribute\", { \"name\": possibleUnits[unitCombinationId] }) }}\n                            </template>\n                        </option>\n                    </select>\n                    <label for=\"unit-combination-ids-select\" data-testing=\"variation-select-unit-label\">{{ $translate(\"Ceres::Template.singleItemContent\") }}</label>\n                </div>\n            </div>\n            <!-- /units -->\n            <div class=\"modal fade attributeSelectModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"attributeSelectModal\" aria-hidden=\"true\">\n                <div class=\"modal-dialog modal-lg\">\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header \">\n                            <h5 class=\"modal-title \">\n                                <b class=\"attributeModalTitle\">\n                                    \n                                </b>\n                            </h5>\n                            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                                <span aria-hidden=\"true\">&times;</span>\n                            </button>\n                        </div>\n                        <div class=\"modal-body \">\n                            <p class=\"attributeModalText mb-0\">\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </template>\n\n        <template v-else>\n            <slot></slot>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { textWidth } from \"../../helper/dom\";\nimport { isDefined, isNull, isNullOrUndefined } from \"../../helper/utils\";\n\nconst NotificationService = require(\"../../services/NotificationService\");\n\nexport default {\n\n    name: \"variation-select\",\n\n    props: {\n        forceContent:\n        {\n            type: Boolean,\n            default: false\n        }\n    },\n\n    inject: {\n        itemId: {\n            default: null\n        }\n    },\n\n    data()\n    {\n        return {\n            filteredVariationsCache: {},\n            lastContentCount: 0\n        };\n    },\n\n    mounted()\n    {\n        // initially check for valid selection and disable add to basket button\n        this.$store.commit(`${this.itemId}/variationSelect/setIsVariationSelected`, !!this.currentSelection);\n    },\n\n    computed:\n    {\n        currentVariation() {\n            return this.$store.getters[`${this.itemId}/currentItemVariation`];\n        },\n\n        currentVariationSelect() {\n            return this.$store.state.items[this.itemId] && this.$store.state.items[this.itemId].variationSelect;\n        },\n\n        /**\n         * returns true if any variation has no attributes\n         */\n        hasEmptyOption()\n        {\n            return this.variations.some(variation => !variation.attributes.length);\n        },\n\n        addPleaseSelectOption()\n        {\n            return App.config.item.showPleaseSelect;\n        },\n\n        /**\n         * returns the variation, based on the selected attributes / unit\n         * returns false if there are none or multiple results\n         */\n        currentSelection()\n        {\n            const filteredVariations = this.filterVariations(null, null, true);\n\n            if (filteredVariations.length === 1)\n            {\n                return filteredVariations[0];\n            }\n\n            return false;\n        },\n\n        /**\n         * returns all units, selectable by current selection\n         * prop 'forceContent' with value true will return all units, without filtering\n         */\n        possibleUnits()\n        {\n            // use an object, to make the entries unique\n            const possibleUnits = {};\n            const variations = this.forceContent ? this.variations : this.filterVariations(null, null, null, true);\n\n            for (const variation of variations)\n            {\n                possibleUnits[variation.unitCombinationId] = variation.unitName;\n            }\n\n            return possibleUnits;\n        },\n\n        possibleUnitCombinationIds()\n        {\n            return this.transformPossibleUnits(this.possibleUnits).map(value => value[0]);\n        },\n\n        isContentVisible()\n        {\n            return !this.forceContent && !!this.currentSelection || this.forceContent;\n        },\n\n        hasSelection()\n        {\n            return !isNullOrUndefined(this.selectedAttributes) && !Object.values(this.selectedAttributes).some((value) => value < 0);\n        },\n\n        attributes() {\n            return this.currentVariationSelect && this.currentVariationSelect.attributes;\n        },\n\n        selectedAttributes() {\n            return this.currentVariationSelect && this.currentVariationSelect.selectedAttributes;\n        },\n\n        selectedUnit() {\n            return this.currentVariationSelect && this.currentVariationSelect.selectedUnit;\n        },\n\n        variations() {\n            return this.currentVariationSelect && this.currentVariationSelect.variations;\n        }\n    },\n\n    methods:\n    {\n        /**\n         * select an attribute and check, if the selection is valid; if not, unsetInvalidSelection will be executed\n         * @param {number} attributeId\n         * @param {[number, string, null]} attributeValueId\n         */\n        selectAttribute(attributeId, attributeValueId)\n        {\n            attributeValueId = parseInt(attributeValueId) || null;\n\n            if (this.selectedAttributes[attributeId] !== attributeValueId)\n            {\n                this.$store.commit(`${this.itemId}/variationSelect/selectItemAttribute`, { attributeId, attributeValueId });\n                this.onSelectionChange(attributeId, attributeValueId, null);\n            }\n        },\n\n        /**\n         * select a unit and check, if the selection is valid; if not, unsetInvalidSelection will be executed\n         * @param {[number, string]} unitId\n         */\n        selectUnit(unitId)\n        {\n            unitId = parseInt(unitId);\n            this.$store.commit(`${this.itemId}/variationSelect/selectItemUnit`, unitId);\n            this.onSelectionChange(null, null, unitId);\n        },\n\n        onSelectionChange(attributeId, attributeValueId, unitId)\n        {\n            if (this.currentSelection)\n            {\n                this.setVariation(this.currentSelection.variationId);\n            }\n            else if (!this.hasSelection)\n            {\n                // user switched back to \"please select\"\n                this.setVariation(0);\n            }\n            else\n            {\n                this.unsetInvalidSelection(attributeId, attributeValueId, unitId);\n            }\n\n            this.lastContentCount = this.possibleUnitCombinationIds.length;\n        },\n\n        /**\n         * changes the selected attributes / unit, to ensure a valid seelction\n         * @param {[number, null]} attributeId\n         * @param {[number, null]} attributeValueId\n         * @param {[number, null]} unitId\n         */\n        unsetInvalidSelection(attributeId, attributeValueId, unitId)\n        {\n            const qualifiedVariations = this.getQualifiedVariations(attributeId, attributeValueId, unitId);\n            const closestVariations = this.getClosestVariations(qualifiedVariations);\n            \n            // if the salable 'closestVariations' is undefined, take the not-salable one\n            const closestVariation = closestVariations[0] || closestVariations[1];\n\n            if (!closestVariation)\n            {\n                return;\n            }\n\n            const invalidSelection = this.getInvalidSelectionByVariation(closestVariation);\n\n            this.correctSelection(invalidSelection);\n        },\n\n        getTooltip(attribute, attributeValue)\n        {\n            if(!this.isAttributeSelectionValid(attribute.attributeId, attributeValue.attributeValueId, true))\n            {\n                return this.getInvalidOptionTooltip(attribute.attributeId, attributeValue.attributeValueId);\n            }\n            else if(attribute.type === \"image\")\n            {\n                return this.$translate(\"Ceres::Template.singleItemAttributeTooltip\", {\n                    attribute: attribute.name,\n                    value: attributeValue.name\n                });\n            }\n\n            return \"\";\n        },\n\n        /**\n         * returns a string for box tooltips, for not available options\n         * @param {number} attributeId\n         * @param {number} attributeValueId\n         */\n        getInvalidOptionTooltip(attributeId, attributeValueId)\n        {\n            const qualifiedVariations = this.getQualifiedVariations(attributeId, attributeValueId);\n            const closestVariations   = this.getClosestVariations(qualifiedVariations);\n\n            if (!closestVariations || closestVariations.length <= 0)\n            {\n                return \"\";\n            }\n\n            const invalidSelections = [\n                !!closestVariations[0] ? this.getInvalidSelectionByVariation(closestVariations[0]) : null,\n                !!closestVariations[1] ? this.getInvalidSelectionByVariation(closestVariations[1]) : null\n            ];\n\n            if (!!invalidSelections[0]\n                && !!invalidSelections[1]\n                && invalidSelections[0].attributesToReset.length > invalidSelections[1].attributesToReset.length)\n            {\n                // there is a non-salable variation with less changes\n                return this.$translate(\"Ceres::Template.singleItemNotSalable\");\n            }\n\n            const invalidSelection = invalidSelections[0] || invalidSelections[1];\n            const names = [];\n\n            for (const attribute of invalidSelection.attributesToReset)\n            {\n                if (attribute.attributeId !== attributeId)\n                {\n                    names.push(\"<b>\" + attribute.name +\"</b>\");\n                }\n            }\n            if (invalidSelection.newUnit)\n            {\n                names.push(\n                    \"<b>\" + this.$translate(\"Ceres::Template.singleItemContent\") + \"</b>\"\n                );\n            }\n\n            if (!names.length)\n            {\n                return null;\n            }\n\n            return this.$translate(\"Ceres::Template.singleItemNotAvailableInSelection\", { name: names.join(\", \") });\n        },\n\n        /**\n         * returns a list of variations, filtered by attribute or unit\n         * @param {[number, null]} attributeId\n         * @param {[number, null]} attributeValueId\n         * @param {[number, null]} unitId\n         */\n        getQualifiedVariations(attributeId, attributeValueId, unitId)\n        {\n            if (isDefined(attributeValueId))\n            {\n                return this.variations.filter(variation =>\n                {\n                    return isDefined(variation.attributes.find(attribute =>\n                        attribute.attributeId === attributeId && attribute.attributeValueId === attributeValueId));\n                });\n            }\n            else if (isDefined(unitId))\n            {\n                return this.variations.filter(variation => variation.unitCombinationId === unitId);\n            }\n\n            return this.variations.filter(variation => !variation.attributes.length);\n        },\n\n        /**\n         * return a salable and a non-salable variation with the minimum number of changes on attributes compared to the current selection.\n         * @param {array} qualifiedVariations\n         */\n        getClosestVariations(qualifiedVariations)\n        {\n            let closestSalableVariation, numberOfSalableChanges;\n            let closestNonSalableVariation, numberOfNonSalableChanges;\n\n            for (const variation of qualifiedVariations)\n            {\n                let changes = 0;\n\n                if (variation.unitCombinationId !== this.selectedUnit && !isNull(this.selectedUnit))\n                {\n                    // when the unit dropdown isn't visible, it should have a lower weight for reset investigations\n                    const unitWeight = this.possibleUnitCombinationIds.length > 1 && this.isContentVisible ? 0.9 : 0.1;\n\n                    changes += unitWeight;\n                }\n\n                for (const attribute of variation.attributes)\n                {\n                    if (this.selectedAttributes[attribute.attributeId] !== attribute.attributeValueId)\n                    {\n                        changes++;\n                    }\n                }\n\n                if(variation.isSalable && (!numberOfSalableChanges || changes < numberOfSalableChanges))\n                {\n                    closestSalableVariation = variation;\n                    numberOfSalableChanges = changes;\n                }\n                else if (!variation.isSalable && (!numberOfNonSalableChanges || changes < numberOfNonSalableChanges))\n                {\n                    closestNonSalableVariation = variation;\n                    numberOfNonSalableChanges = changes;\n                }\n            }\n\n            return [closestSalableVariation, closestNonSalableVariation];\n        },\n\n        /**\n         * returns object with array 'attributesToReset' and newUnit. The attributesToReset contains all attributes, which are not matching with the given variation\n         * @param {object} variation\n         */\n        getInvalidSelectionByVariation(variation)\n        {\n            const attributesToReset = [];\n            let newUnit = null;\n\n            for (let selectedAttributeId in this.selectedAttributes)\n            {\n                selectedAttributeId = parseInt(selectedAttributeId);\n                const variationAttribute = variation.attributes.find(attribute => attribute.attributeId === selectedAttributeId);\n\n                if (!isNull(this.selectedAttributes[selectedAttributeId]))\n                {\n                    if (variationAttribute && variationAttribute.attributeValueId !== this.selectedAttributes[selectedAttributeId] || !variationAttribute)\n                    {\n                        const attributeToReset = this.attributes.find(attr => attr.attributeId === selectedAttributeId);\n\n                        attributesToReset.push(attributeToReset);\n                    }\n                }\n            }\n\n            if (variation.unitCombinationId !== this.selectedUnit)\n            {\n                newUnit = variation.unitCombinationId;\n            }\n\n            return { attributesToReset, newUnit };\n        },\n\n        /**\n         * resets all invalid attributes and change the unit, if required. Prints a message to the user if so.\n         * @param {object} invalidSelection\n         */\n        correctSelection(invalidSelection)\n        {\n            const messages   = [];\n            const attributes = JSON.parse(JSON.stringify(this.selectedAttributes));\n\n            for (const attributeToReset of invalidSelection.attributesToReset)\n            {\n                messages.push(\n                    this.$translate(\"Ceres::Template.singleItemNotAvailable\", { name: attributeToReset.name })\n                );\n\n                attributes[attributeToReset.attributeId] = (!this.hasEmptyOption && App.config.item.showPleaseSelect) ? -1 : null;\n            }\n\n            if (invalidSelection.newUnit)\n            {\n                if (this.lastContentCount > 1 && this.possibleUnitCombinationIds.length > 1 && !isNull(this.selectedUnit))\n                {\n                    messages.push(\n                        this.$translate(\"Ceres::Template.singleItemNotAvailable\", { name:\n                                this.$translate(\"Ceres::Template.singleItemContent\")\n                        })\n                    );\n                }\n\n                this.$store.commit(`${this.itemId}/variationSelect/selectItemUnit`, invalidSelection.newUnit);\n            }\n\n            this.$store.commit(`${this.itemId}/variationSelect/setItemSelectedAttributes`, attributes);\n\n            this.setVariation(this.currentSelection ? this.currentSelection.variationId : 0);\n\n            NotificationService.warn(\n                messages.join(\"<br>\")\n            ).closeAfter(5000);\n        },\n\n        /**\n         * returns matching variations with current selection\n         * attributes and unitId could be filled, to check a specific selection\n         * @param {object} attributes\n         * @param {number} unitId\n         * @param {boolean} strict\n         */\n        filterVariations(attributes, unitId, strict, ignoreUnit)\n        {\n            attributes = attributes || this.selectedAttributes;\n            unitId = unitId || this.selectedUnit;\n            strict = !!strict;\n            ignoreUnit = !!ignoreUnit;\n\n            const key = JSON.stringify(attributes) + \"_\" + unitId + \"_\" + strict + \"_\" + ignoreUnit;\n\n            if (isDefined(this.filteredVariationsCache[key]))\n            {\n                return this.filteredVariationsCache[key];\n            }\n\n            const uniqueValues = [...new Set(Object.values(attributes))];\n            const isEmptyOptionSelected = uniqueValues.length === 1 && isNull(uniqueValues[0]);\n            const filteredVariations = this.variations.filter(variation =>\n            {\n                // the selected unit is not matching\n                if (!ignoreUnit && variation.unitCombinationId !== unitId)\n                {\n                    return false;\n                }\n\n                // the variation has no attributes (only checked, if any attribute has a selected value); or the variation has attributes and empty option is selected\n                // requires more than 0 attributes\n                if (((!isEmptyOptionSelected && !variation.attributes.length) || (isEmptyOptionSelected && variation.attributes.length))\n                    && this.attributes.length > 0)\n                {\n                    return false;\n                }\n\n                for (const attributeId in attributes)\n                {\n                    const variationAttribute = variation.attributes.find(variationAttribute =>\n                        variationAttribute.attributeId === parseInt(attributeId));\n\n                    // an attribute is not matching with selection\n                    if (variationAttribute &&\n                        variationAttribute.attributeValueId !== attributes[attributeId] &&\n                        (strict || !strict && !isNull(attributes[attributeId]) && attributes[attributeId] !== -1))\n                    {\n                        return false;\n                    }\n                }\n\n                return true;\n            });\n\n            this.filteredVariationsCache[key] = filteredVariations;\n\n            return filteredVariations;\n        },\n\n        /**\n         * returns true, if the selection with a new attribute value would be valid\n         * @param {number} attributeId\n         * @param {[number, string, null]} attributeValueId\n         * @param {boolean} filterSalableVariations\n         */\n        isAttributeSelectionValid(attributeId, attributeValueId, filterSalableVariations)\n        {\n            attributeValueId = parseInt(attributeValueId) || null;\n            if (this.selectedAttributes[attributeId] === attributeValueId)\n            {\n                return true;\n            }\n\n            const selectedAttributes = JSON.parse(JSON.stringify(this.selectedAttributes));\n\n            selectedAttributes[attributeId] = parseInt(attributeValueId) || null;\n\n            const ignoreUnit = !(Object.keys(this.possibleUnits).length > 1 && this.isContentVisible);\n            let variations = this.filterVariations(selectedAttributes, null, null, ignoreUnit);\n\n            if (filterSalableVariations)\n            {\n                variations = variations.filter(variation => variation.isSalable)\n            }\n\n            return variations.length > 0;\n        },\n\n        /**\n         * returns true, if the selection with a new unitId would be valid\n         * @param {[number, string]} unitId\n         */\n        isUnitSelectionValid(unitId)\n        {\n            unitId = parseInt(unitId);\n            if (this.selectedUnit === unitId)\n            {\n                return true;\n            }\n\n            return this\n                .filterVariations(null, unitId)\n                .filter(variation => variation.isSalable)\n                .length > 0\n        },\n\n        /**\n         * dispatch vuex action 'loadVariation' to archive a variation\n         * dispatches a custom event named 'onVariationChanged'\n         * @param {[string, number, null]} variationId\n         */\n        setVariation(variationId)\n        {\n            if (!isDefined(variationId) && this.currentSelection)\n            {\n                variationId = this.currentSelection.variationId;\n            }\n\n            if (isDefined(variationId))\n            {\n                this.$store.dispatch(`${this.itemId}/loadVariation`, variationId).then(variation =>\n                {\n                    document.dispatchEvent(new CustomEvent(\"onVariationChanged\",\n                        {\n                            detail:\n                                {\n                                    attributes: variation.attributes,\n                                    documents: variation.documents,\n                                    itemId: this.itemId\n                                }\n                        }));\n                });\n            }\n        },\n\n        isTextCut(content)\n        {\n            if (this.$refs.attributesContaner)\n            {\n                return textWidth(content, \"Custom-Font, Helvetica, Arial, sans-serif\") > this.$refs.attributesContaner[0].clientWidth;\n            }\n\n            return false;\n        },\n\n        getSelectedAttributeValueName(attribute)\n        {\n            const selectedAttributeValueId =  this.selectedAttributes[attribute.attributeId];\n            const selectedAttributeValue = attribute.values.find(attrValue => attrValue.attributeValueId === selectedAttributeValueId);\n\n            if (selectedAttributeValue)\n            {\n                return selectedAttributeValue.name;\n            }\n            else if (App.config.item.showPleaseSelect && selectedAttributeValueId === -1)\n            {\n                return this.$translate(\"Ceres::Template.singleItemPleaseSelect\");\n            }\n            return this.$translate(\"Ceres::Template.singleItemNoSelection\");\n        },\n\n        transformPossibleUnits(possibleUnits)\n        {\n            return Object.entries(possibleUnits).sort((unitA, unitB) => {\n                unitA = this.splitUnitName(unitA[1]);\n                unitB = this.splitUnitName(unitB[1]);\n                // order by unit\n                if (unitA[1] < unitB[1]) {\n                    return -1;\n                }\n                if (unitA[1] > unitB[1]) {\n                    return 1;\n                }\n                // order by content (count)\n                if (unitA[0] < unitB[0]) {\n                    return -1;\n                }\n                if (unitA[0] > unitB[0]) {\n                    return 1;\n                }\n                return 0;\n            });\n        },\n        splitUnitName(unitName) {\n            const unitNameSplit = unitName.split(\" \");\n\n            if (!isNaN(unitNameSplit[0])) {\n                unitNameSplit[0] = unitNameSplit[0].replace(App.currencyPattern.separator_thousands, \"\");\n                unitNameSplit[0] = parseInt(unitNameSplit[0]);\n            }\n\n            return unitNameSplit;\n        }\n    },\n\n    watch:\n    {\n        currentSelection(value)\n        {\n            this.$store.commit(`${this.itemId}/variationSelect/setIsVariationSelected`, !!value);\n        },\n        variations()\n        {\n            // FIX unset variation cache after subsequent variations are loaded\n            this.filteredVariationsCache = {};\n        }\n    }\n}\n</script>\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VariationSelect.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VariationSelect.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VariationSelect.vue?vue&type=template&id=bdb513a0&\"\nimport script from \"./VariationSelect.vue?vue&type=script&lang=js&\"\nexport * from \"./VariationSelect.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}