{"version":3,"file":"product-list-with-sub-category.js","sources":["../../../../src/assets/scripts/product-list-with-sub-category.entry.js"],"sourcesContent":["window.arjoProductListWithSubCategoryModule =\n  window.arjoProductListWithSubCategoryModule ||\n  (() => {\n    const state = {\n      isInitialized: false,\n      elements: {},\n    };\n\n    const setUp = () => {\n      const elements = [...document.querySelectorAll('.arjo-o-product-list-with-sub-category')];\n      elements.forEach((element) => {\n        const id = element.dataset.listId;\n        const innerState = {\n          domNode: element,\n          expanded: false,\n          sortBy: undefined,\n          filterByLv1Category: undefined,\n          filterByLv2Category: undefined,\n          data: [],\n        };\n\n        const grid = innerState.domNode.querySelector('.arjo-o-product-list-with-sub-category__grid');\n\n        const setData = (data) => {\n          innerState.data = [...data];\n        };\n\n        const createProductCardHtml = (product) => {\n          /*product schema\n            {\n              \"isNew\": true,\n              \"timestamp\": 1,\n              \"badge\": \"New\",\n              \"url\": \"#\",\n              \"pictureProperties\": {\n                \"sources\": [\n                  {\n                    \"media\": \"(min-width:768px)\",\n                    \"srcSet\": \"/04.jpg\"\n                  }\n                ],\n                \"default\": {\n                  \"src\": \"/02.jpg\",\n                  \"alt\": \"Product\"\n                }\n              },\n              \"category\": \"Hospital beds\",\n              \"categoryLv1Id\": [\n              \"1\",\n              \"4\"\n              ],\n              \"categoryLv2Id\": {\n                \"1\": [\n                  \"1\",\n                  \"2\"\n                ],\n                \"4\": [\n                  \"1\",\n                  \"2\"\n                ]\n              },\n              \"heading\": \"Maxi Sky 2 Plus\",\n              \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non velit sagittis, pulvinar nisl vel, feugiat ligula.\"\n            }\n          */\n          const badgeHtml = product.isNew ? `<div class=\"arjo-o-product-card__badge\">${product.badge}</div>` : '';\n          const pictureHtml = (() => {\n            let html = '';\n            if (!product.pictureProperties) return html;\n            html += `<picture class=\"arjo-a-picture\">`;\n            product.pictureProperties.sources.forEach((source) => {\n              html += `<source media=\"${source.media}\" srcset=\"${source.srcSet}\" />`;\n            });\n            html += `<img src=\"${product.pictureProperties.default.src}\" alt=\"${product.pictureProperties.default.alt}\" loading=\"lazy\"/>`;\n            html += `</picture>`;\n            return html;\n          })();\n\n          return `\n            <div class=\"arjo-o-product-card arjo-card ${product.isNew ? 'arjo-o-product-card--new' : ''} arjo-o-product-card--categoried\" \n                  data-timestamp=\"${product.timestamp}\">\n              <div style=\"display: none;\" data-category-lv1-id>\n                ${JSON.stringify(product.categoryLv1Id)}\n              </div>\n              <div style=\"display: none;\" data-category-lv2-id>\n                ${JSON.stringify(product.categoryLv2Id)}\n              </div>\n              <a href=\"${product.url}\" class=\"arjo-o-product-card__link\">\n                <div class=\"arjo-o-product-card__head\">\n                  ${badgeHtml}\n                  <div class=\"arjo-o-product-card__tag\">${product.category}</div>\n                </div>\n                <div class=\"arjo-o-product-card__picture\">\n                  ${pictureHtml}\n                </div>\n                <h5 class=\"arjo-o-product-card__heading\">${product.heading}</h5>\n                <div class=\"arjo-o-product-card__description\">${product.description}</div>\n              </a>\n            </div>         \n          `;\n        };\n\n        const updateDom = () => {\n          let dataForRender;\n          switch (innerState.sortBy) {\n            case '0':\n              dataForRender = [...innerState.data].sort((a, b) => {\n                return b.timestamp.localeCompare(a.timestamp);\n              });\n              break;\n            case '1':\n              dataForRender = [...innerState.data].sort((a, b) => {\n                return a.heading.localeCompare(b.heading);\n              });\n              break;\n            default:\n              dataForRender = [...innerState.data];\n              break;\n          }\n\n          switch (innerState.filterByLv1Category) {\n            case '0':\n            case null:\n            case undefined:\n              break;\n            default:\n              dataForRender = [...dataForRender.filter((product) => product.categoryLv1Id.includes(innerState.filterByLv1Category))];\n              break;\n          }\n\n          switch (innerState.filterByLv2Category) {\n            case '0':\n            case null:\n            case undefined:\n              break;\n            default:\n              dataForRender = [\n                ...dataForRender.filter(\n                  (product) =>\n                    product.categoryLv2Id[innerState.filterByLv1Category] !== undefined &&\n                    product.categoryLv2Id[innerState.filterByLv1Category].includes(innerState.filterByLv2Category)\n                ),\n              ];\n              break;\n          }\n\n          const cards = grid.querySelectorAll('.arjo-o-product-card');\n          cards.forEach((card) => {\n            card.remove();\n          });\n          dataForRender.forEach((data) => {\n            grid.innerHTML += createProductCardHtml(data);\n          });\n\n          if (dataForRender.length <= 9) {\n            innerState.domNode.classList.remove('arjo-o-product-list-with-sub-category--hide-expander-tablet');\n            innerState.domNode.classList.add('arjo-o-product-list-with-sub-category--hide-expander');\n          } else if (dataForRender.length <= 12) {\n            innerState.domNode.classList.remove('arjo-o-product-list-with-sub-category--hide-expander');\n            innerState.domNode.classList.add('arjo-o-product-list-with-sub-category--hide-expander-tablet');\n          } else {\n            innerState.domNode.classList.remove('arjo-o-product-list-with-sub-category--hide-expander');\n            innerState.domNode.classList.remove('arjo-o-product-list-with-sub-category--hide-expander-tablet');\n          }\n\n          if (innerState.expanded) {\n            grid.classList.add('arjo-o-product-list-with-sub-category__grid--show-all');\n          } else {\n            grid.classList.remove('arjo-o-product-list-with-sub-category__grid--show-all');\n          }\n        };\n\n        const setState = ({ expanded, sortBy, filterByLv1Category, filterByLv2Category }) => {\n          innerState.expanded = expanded;\n          innerState.sortBy = sortBy;\n          innerState.filterByLv1Category = filterByLv1Category;\n          innerState.filterByLv2Category = filterByLv2Category;\n          updateDom();\n        };\n\n        const getState = () => {\n          return {\n            expanded: innerState.expanded,\n            sortBy: innerState.sortBy,\n            filterByLv1Category: innerState.filterByLv1Category,\n            filterByLv2Category: innerState.filterByLv2Category,\n          };\n        };\n\n        const expander = element.querySelector('.arjo-m-button-expander');\n        expander?.addEventListener('change', (e) => {\n          setState({\n            expanded: e.target.checked,\n            sortBy: innerState.sortBy,\n            filterByLv1Category: innerState.filterByLv1Category,\n            filterByLv2Category: innerState.filterByLv2Category,\n          });\n          if (e.target.checked) return;\n\n          if (window.arjoJs.isMobile()) {\n            grid.querySelectorAll('.arjo-o-product-card ')[8].scrollIntoViewEx();\n          } else {\n            grid.querySelectorAll('.arjo-o-product-card ')[11].scrollIntoViewEx();\n          }\n        });\n        state.elements[id] = {\n          setData,\n          setState,\n          get currentState() {\n            return getState();\n          },\n        };\n      });\n    };\n\n    const init = () => {\n      if (state.isInitialized) return;\n      setUp();\n      state.isInitialized = true;\n    };\n\n    const getElement = (id) => {\n      return state.elements[id];\n    };\n\n    return { init, getElement };\n  })();\n\nwindow.addEventListener('load', window.arjoProductListWithSubCategoryModule.init);\n"],"names":["state","setUp","element","id","innerState","grid","setData","data","createProductCardHtml","product","badgeHtml","pictureHtml","html","source","updateDom","dataForRender","a","b","card","setState","expanded","sortBy","filterByLv1Category","filterByLv2Category","getState","expander"],"mappings":"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"}