{"version":3,"file":"landing.js","sources":["../../src/EmployeeFeedback.vue","../../landing/landing.js"],"sourcesContent":["<script setup>\nimport { computed, ref } from \"vue\";\n\nconst props = defineProps({\n  data: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst currentFeedback = ref(0);\nconst countFeedback = computed(() => props.data.length);\n\nconst isShowControllers = computed(() => props.data.length > 1);\nconst isDisablePrevButton = computed(() => currentFeedback.value === 0);\nconst isDisableNextButton = computed(\n  () => currentFeedback.value === countFeedback.value - 1,\n);\n\nfunction toPrevFeedback() {\n  if (isDisablePrevButton.value) return;\n  currentFeedback.value = currentFeedback.value - 1;\n}\n\nfunction toNextFeedback() {\n  if (isDisableNextButton.value) return;\n  currentFeedback.value = currentFeedback.value + 1;\n}\n</script>\n\n<template>\n  <div :class=\"[$style.wrapper, $style.frame]\">\n    <h2 :class=\"$style.title\">\n      <mark>Лица</mark>\n      нашей компании\n    </h2>\n    <div v-if=\"isShowControllers\" :class=\"$style.controllers\" role=\"group\">\n      <button\n        :class=\"$style.controller\"\n        @click=\"toPrevFeedback\"\n        :disabled=\"isDisablePrevButton\"\n      />\n      <button\n        :class=\"$style.controller\"\n        @click=\"toNextFeedback\"\n        :disabled=\"isDisableNextButton\"\n      />\n    </div>\n\n    <div :class=\"$style.widget\">\n      <div\n        :class=\"$style.feedbacks\"\n        :style=\"{ '--offset': currentFeedback * -120 + '%' }\"\n        v-touch:swipe.left=\"toNextFeedback\"\n        v-touch:swipe.right=\"toPrevFeedback\"\n      >\n        <article\n          :class=\"$style.feedback\"\n          v-for=\"(item, index) of props.data\"\n          :key=\"index\"\n        >\n          <div :class=\"$style.image\">\n            <img :src=\"item.image\" :alt=\"item.name\" />\n          </div>\n          <figure :class=\"$style.texts\">\n            <blockquote>\n              <p v-text=\"item.feedback\" />\n            </blockquote>\n            <figcaption>\n              <hgroup>\n                <h4 v-text=\"item.name\" />\n                <p v-text=\"item.position\" />\n              </hgroup>\n            </figcaption>\n          </figure>\n        </article>\n      </div>\n    </div>\n\n    <div :class=\"$style.points\" v-if=\"isShowControllers\" role=\"group\">\n      <button\n        v-for=\"index of countFeedback\"\n        @click=\"currentFeedback = index - 1\"\n        :key=\"index\"\n        :class=\"$style.point\"\n        :disabled=\"currentFeedback === index - 1\"\n      />\n    </div>\n  </div>\n</template>\n\n<style module>\n:global(#employee-feedback) {\n  font-family: \"Montserrat\", Arial, sans-serif;\n  color: #333333;\n  line-height: 1.4;\n  padding: 60px 0;\n  overflow-x: hidden;\n}\n\n:global(#employee-feedback *) {\n  box-sizing: border-box;\n}\n\n.wrapper {\n  position: relative;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 90px 10px 110px;\n}\n\n.frame::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -140px;\n  display: block;\n  border: 10px solid #f0f0f0;\n  border-radius: 60px;\n  box-shadow: 0 50px 40px -20px rgba(159, 179, 195, 0.2);\n}\n\n.title {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  transform: translateY(-50%);\n  font-family: \"Montserrat\", Arial, sans-serif;\n  font-weight: 700;\n  font-size: 48px;\n  color: #333333;\n  line-height: 1.4;\n}\n\n.title::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -40px;\n  background-color: #ffffff;\n  z-index: -1;\n}\n\n.title mark {\n  background: transparent;\n  color: #ed1651;\n}\n\n.controllers {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  flex-flow: row nowrap;\n  column-gap: 14px;\n}\n\n.controllers::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 -20px;\n  background-color: #ffffff;\n}\n\n.controller {\n  position: relative;\n  display: inline-block;\n  width: 42px;\n  height: 42px;\n  color: #ed1651;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.controller::after {\n  content: \"\";\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  display: block;\n  width: 36px;\n  height: 36px;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-color: #ed1651;\n  mask: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjUwNzUgMTYuNzU3NUMxMS4zNDgyIDE2LjkyMzkgMTEuMjIzMyAxNy4xMjAyIDExLjE0IDE3LjMzNUMxMC45NjUgMTcuNzYxMSAxMC45NjUgMTguMjM4OSAxMS4xNCAxOC42NjVDMTEuMjIzMyAxOC44Nzk4IDExLjM0ODIgMTkuMDc2MSAxMS41MDc1IDE5LjI0MjVMMTYuNzU3NSAyNC40OTI1QzE3LjA4NyAyNC44MjIgMTcuNTM0IDI1LjAwNzIgMTggMjUuMDA3MkMxOC40NjYgMjUuMDA3MiAxOC45MTMgMjQuODIyIDE5LjI0MjUgMjQuNDkyNUMxOS41NzIgMjQuMTYzIDE5Ljc1NzIgMjMuNzE2IDE5Ljc1NzIgMjMuMjVDMTkuNzU3MiAyMi43ODQgMTkuNTcyIDIyLjMzNyAxOS4yNDI1IDIyLjAwNzVMMTYuOTY3NSAxOS43NUgyMy4yNUMyMy43MTQxIDE5Ljc1IDI0LjE1OTMgMTkuNTY1NiAyNC40ODc0IDE5LjIzNzRDMjQuODE1NiAxOC45MDkyIDI1IDE4LjQ2NDEgMjUgMThDMjUgMTcuNTM1OSAyNC44MTU2IDE3LjA5MDggMjQuNDg3NCAxNi43NjI2QzI0LjE1OTMgMTYuNDM0NCAyMy43MTQxIDE2LjI1IDIzLjI1IDE2LjI1SDE2Ljk2NzVMMTkuMjQyNSAxMy45OTI1QzE5LjQwNjUgMTMuODI5OCAxOS41MzY3IDEzLjYzNjMgMTkuNjI1NiAxMy40MjNDMTkuNzE0NCAxMy4yMDk4IDE5Ljc2MDEgMTIuOTgxIDE5Ljc2MDEgMTIuNzVDMTkuNzYwMSAxMi41MTkgMTkuNzE0NCAxMi4yOTAyIDE5LjYyNTYgMTIuMDc3QzE5LjUzNjcgMTEuODYzNyAxOS40MDY1IDExLjY3MDIgMTkuMjQyNSAxMS41MDc1QzE5LjA3OTggMTEuMzQzNSAxOC44ODYzIDExLjIxMzMgMTguNjczIDExLjEyNDRDMTguNDU5OCAxMS4wMzU2IDE4LjIzMSAxMC45ODk5IDE4IDEwLjk4OTlDMTcuNzY5IDEwLjk4OTkgMTcuNTQwMiAxMS4wMzU2IDE3LjMyNyAxMS4xMjQ0QzE3LjExMzcgMTEuMjEzMyAxNi45MjAyIDExLjM0MzUgMTYuNzU3NSAxMS41MDc1TDExLjUwNzUgMTYuNzU3NVpNMC41IDE4QzAuNSAyMS40NjEyIDEuNTI2MzYgMjQuODQ0NiAzLjQ0OTI4IDI3LjcyMjVDNS4zNzIyMSAzMC42MDAzIDguMTA1MzMgMzIuODQzNCAxMS4zMDMgMzQuMTY3OUMxNC41MDA3IDM1LjQ5MjQgMTguMDE5NCAzNS44MzkgMjEuNDE0MSAzNS4xNjM3QzI0LjgwODggMzQuNDg4NSAyNy45MjcgMzIuODIxOCAzMC4zNzQ0IDMwLjM3NDRDMzIuODIxOCAyNy45MjcgMzQuNDg4NSAyNC44MDg4IDM1LjE2MzcgMjEuNDE0MUMzNS44MzkgMTguMDE5NCAzNS40OTI0IDE0LjUwMDcgMzQuMTY3OSAxMS4zMDNDMzIuODQzNCA4LjEwNTMzIDMwLjYwMDMgNS4zNzIyMSAyNy43MjI1IDMuNDQ5MjhDMjQuODQ0NiAxLjUyNjM2IDIxLjQ2MTIgMC41IDE4IDAuNUMxNS43MDE5IDAuNSAxMy40MjYyIDAuOTUyNjUxIDExLjMwMyAxLjgzMjExQzkuMTc5ODQgMi43MTE1NyA3LjI1MDY2IDQuMDAwNjEgNS42MjU2MyA1LjYyNTYzQzIuMzQzNzQgOC45MDc1MiAwLjUgMTMuMzU4NyAwLjUgMThaTTMyIDE4QzMyIDIwLjc2ODkgMzEuMTc4OSAyMy40NzU3IDI5LjY0MDYgMjUuNzc4QzI4LjEwMjIgMjguMDgwMyAyNS45MTU3IDI5Ljg3NDcgMjMuMzU3NiAzMC45MzQzQzIwLjc5OTQgMzEuOTkzOSAxNy45ODQ1IDMyLjI3MTIgMTUuMjY4NyAzMS43MzFDMTIuNTUzIDMxLjE5MDggMTAuMDU4NCAyOS44NTc0IDguMTAwNTEgMjcuODk5NUM2LjE0MjU3IDI1Ljk0MTYgNC44MDkyIDIzLjQ0NyA0LjI2OTAxIDIwLjczMTNDMy43Mjg4MSAxOC4wMTU1IDQuMDA2MDYgMTUuMjAwNiA1LjA2NTY5IDEyLjY0MjRDNi4xMjUzMSAxMC4wODQzIDcuOTE5NzMgNy44OTc3NyAxMC4yMjIgNi4zNTk0M0MxMi41MjQzIDQuODIxMDkgMTUuMjMxMSA0IDE4IDRDMjEuNzEzIDQgMjUuMjc0IDUuNDc1IDI3Ljg5OTUgOC4xMDA1MUMzMC41MjUgMTAuNzI2IDMyIDE0LjI4NyAzMiAxOFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K\");\n  transition: background-color 0.2s ease-in-out;\n}\n\n.controller:disabled {\n  cursor: default;\n}\n\n.controller:disabled::after {\n  background-color: #dde3e8 !important;\n}\n\n.controller:hover::after {\n  background-color: #ce043c;\n}\n\n.controller:last-of-type {\n  transform: rotate(180deg);\n}\n\n.points {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-flow: row nowrap;\n  column-gap: 27px;\n}\n\n.point {\n  position: relative;\n  display: inline-block;\n  width: 120px;\n  max-width: 120px;\n  height: 6px;\n  border: none;\n  border-radius: 6px;\n  background-color: #f0f0f0;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n\n.point::after {\n  content: \"\";\n  position: absolute;\n  inset: -10px;\n}\n\n.point:hover {\n  background-color: #dde3e8;\n}\n\n.point:disabled {\n  background-color: #ed1651;\n  cursor: default;\n}\n\n.widget {\n  position: relative;\n  width: calc(100% + 140px * 2);\n  overflow-x: hidden;\n  margin: 0 -140px;\n  padding: 0 140px;\n}\n\n.feedbacks {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  column-gap: 20%;\n  transform: translateX(var(--offset, 0%));\n  transition: transform 0.4s ease-in-out;\n}\n\n.feedback {\n  display: flex;\n  flex: 1 0 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  flex-flow: row nowrap;\n  column-gap: 40px;\n  margin-bottom: 74px;\n}\n\n.feedback h4,\n.feedback p,\n.feedback blockquote,\n.feedback figure,\n.feedback figcaption,\n.feedback hgroup {\n  margin: 0;\n  padding: 0;\n}\n\n.image {\n  flex: 0 1 290px;\n  min-width: 290px;\n}\n\n.image img {\n  max-width: 100%;\n}\n\n.texts {\n  display: flex;\n  flex-flow: column-reverse nowrap;\n  flex: 1 0 calc(100% - 330px);\n  max-width: calc(100% - 330px);\n  font-size: 16px;\n}\n\n.texts hgroup {\n  margin-bottom: 34px;\n  line-height: 1.8;\n}\n\n.texts hgroup h4 {\n  font-size: 28px;\n  font-weight: 700;\n}\n\n.texts hgroup p {\n  color: #687f90;\n}\n\n.texts blockquote {\n  line-height: 1.5;\n}\n\n.texts blockquote p {\n  margin-bottom: 1em;\n}\n\n@media screen and (max-width: 1200px) {\n  .wrapper {\n    max-width: 960px;\n    padding: 50px 10px 80px;\n  }\n}\n\n@media screen and (max-width: 960px) {\n  :global(#employee-feedback) {\n    padding: 40px 0;\n  }\n\n  .wrapper {\n    max-width: 640px;\n  }\n\n  .title {\n    font-size: 32px;\n  }\n\n  .frame::before {\n    inset: 0 -80px;\n    border: 6px solid #f0f0f0;\n    border-radius: 40px;\n    box-shadow: 0 35px 40px -20px rgba(159, 179, 195, 0.2);\n  }\n\n  .title::before {\n    inset: 0 -24px;\n  }\n\n  .points {\n    column-gap: 24px;\n  }\n\n  .widget {\n    width: calc(100% + 80px * 2);\n    margin: 0 -80px;\n    padding: 0 80px;\n  }\n\n  .feedback {\n    flex-direction: column;\n    row-gap: 30px;\n    margin-bottom: 50px;\n  }\n\n  .texts {\n    flex: 0 1 100%;\n    max-width: 100%;\n  }\n\n  .texts hgroup {\n    margin-bottom: 30px;\n  }\n\n  .texts hgroup h4 {\n    font-size: 20px;\n  }\n\n  .texts hgroup p {\n    font-size: 14px;\n  }\n\n  .texts blockquote {\n    font-size: 14px;\n  }\n}\n\n@media screen and (max-width: 640px) {\n  .wrapper {\n    max-width: 480px;\n  }\n\n  .controllers,\n  .points {\n    display: none;\n  }\n\n  .image {\n    flex-basis: 240px;\n    width: 240px;\n    min-width: 240px;\n  }\n\n  .feedback {\n    margin-bottom: 0;\n  }\n\n  .texts hgroup {\n    margin-bottom: 20px;\n    text-align: center;\n  }\n}\n\n@media screen and (max-width: 480px) {\n  :global(#employee-feedback) {\n    padding: 30px 0;\n  }\n\n  .wrapper {\n    max-width: 320px;\n    min-width: 320px;\n    padding: 20px;\n  }\n\n  .title {\n    font-size: 20px;\n    left: 30px;\n  }\n\n  .frame::before {\n    inset: 0;\n    border: 4px solid #f0f0f0;\n    border-radius: 20px;\n    box-shadow: 0 25px 40px -20px rgba(159, 179, 195, 0.2);\n  }\n\n  .title::before {\n    inset: 0 -13px;\n  }\n\n  .widget {\n    width: calc(100% + 20px * 2);\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n}\n</style>\n","import { createApp } from \"vue\";\nimport EmployeeFeedback from \"@/EmployeeFeedback.vue\";\nimport TouchEvents from \"vue3-touch-events\";\nimport \"./style.css\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  if (\n    Array.isArray(EMPLOYEE_FEEDBACK_DATA) &&\n    document.getElementById(\"employee-feedback\") !== null\n  ) {\n    createApp(EmployeeFeedback, {\n      data: EMPLOYEE_FEEDBACK_DATA,\n    })\n      .use(TouchEvents)\n      .mount(\"#employee-feedback\");\n  }\n\n  document\n    .querySelector('[data-elem-id=\"1711477085146\"] a[href=\"#respond\"]')\n    .addEventListener(\"click\", function () {\n      if (document.forms?.form740538760?.elements?.region) {\n        document.forms.form740538760.elements.region.value = \"Неизвестен\";\n      }\n      if (document.forms?.form740538760?.elements?.vacancy) {\n        document.forms.form740538760.elements.vacancy.value = \"Неизвестна\";\n      }\n    });\n});\n"],"names":["props","__props","currentFeedback","ref","countFeedback","computed","data","length","isShowControllers","isDisablePrevButton","value","isDisableNextButton","toPrevFeedback","toNextFeedback","document","addEventListener","Array","isArray","EMPLOYEE_FEEDBACK_DATA","getElementById","createApp","EmployeeFeedback","use","TouchEvents","mount","querySelector","_c","forms","_a","form740538760","_b","elements","region","_f","_d","_e","vacancy"],"mappings":"0vBAGA,MAAMA,EAAQC,EAORC,EAAkBC,EAAI,GACtBC,EAAgBC,GAAS,IAAML,EAAMM,KAAKC,SAE1CC,EAAoBH,GAAS,IAAML,EAAMM,KAAKC,OAAS,IACvDE,EAAsBJ,GAAS,IAAgC,IAA1BH,EAAgBQ,QACrDC,EAAsBN,GAC1B,IAAMH,EAAgBQ,QAAUN,EAAcM,MAAQ,IAGxD,SAASE,IACHH,EAAoBC,QACRR,EAAAQ,MAAQR,EAAgBQ,MAAQ,EAClD,CAEA,SAASG,IACHF,EAAoBD,QACRR,EAAAQ,MAAQR,EAAgBQ,MAAQ,EAClD,uvCCtBAI,SAASC,iBAAiB,oBAAoB,WAE1CC,MAAMC,QAAQC,yBACmC,OAAjDJ,SAASK,eAAe,sBAExBC,EAAUC,EAAkB,CAC1Bf,KAAMY,yBAELI,IAAIC,GACJC,MAAM,sBAGXV,SACGW,cAAc,qDACdV,iBAAiB,SAAS,4BACrB,OAAAW,EAAA,SAAA,kBAASC,YAAT,EAAAC,EAAgBC,oBAAe,EAAAC,EAAAC,mBAAUC,UAC3ClB,SAASa,MAAME,cAAcE,SAASC,OAAOtB,MAAQ,eAEnD,OAAAuB,EAAA,SAAA,kBAASN,YAAT,EAAAO,EAAgBL,oBAAe,EAAAM,EAAAJ,mBAAUK,WAC3CtB,SAASa,MAAME,cAAcE,SAASK,QAAQ1B,MAAQ,aAE9D,GACA"}