{"version":3,"file":"PresentationLayout-BmcVqEo8.mjs","names":[],"sources":["../src/components/layouts/PresentationLayout.vue","../src/components/layouts/PresentationLayout.vue"],"sourcesContent":["<!--\n  A simple layout to display 5 elements over 3 columns\n-->\n<template>\n  <div class=\"d-flex flex-column py-3\">\n    <h2 v-if=\"title\">\n      {{ title }}\n    </h2>\n    \n    <div class=\"d-flex flex-nowrap align-items-stretch overflow-phone-auto\">\n      <!-- First column & first item -->\n      <slot\n        v-if=\"items[0]\"\n        name=\"first\"\n        :item=\"items[0]\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"items[0]\"\n          :first=\"true\" />\n      </slot>\n\n      <!-- Second column & second/third items -->\n      <div\n        v-if=\"items.length > 1\"\n        class=\"column column-margin d-flex-row flex-nowrap\"\n        :class=\"items.length <= 3 ? 'flex-grow-1' : ''\"\n      >\n        <slot\n          v-if=\"items[1]\"\n          name=\"item\"\n          :item=\"items[1]\"\n          :first=\"false\"\n        />\n        <slot\n          v-if=\"items[2]\"\n          name=\"item\"\n          :item=\"items[2]\"\n          :first=\"false\"\n        />\n      </div>\n\n      <!-- Third column & fourth/fifth items -->\n      <div\n        v-if=\"items.length > 3\"\n        class=\"column d-flex-row flex-nowrap show-column\"\n      >\n        <slot\n          v-if=\"items[3]\"\n          name=\"item\"\n          :item=\"items[3]\"\n          :first=\"false\"\n        />\n        <slot\n          v-if=\"items[4]\"\n          name=\"item\"\n          :item=\"items[4]\"\n          :first=\"false\"\n        />\n      </div>\n    </div>\n\n    <!-- Redirection button -->\n    <router-link\n      v-if=\"route\"\n      :to=\"route\"\n      class=\"btn btn-primary align-self-center w-fit-content m-4\"\n    >\n      {{ buttonText || $t('See more') }}\n    </router-link>\n  </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { RouteParams } from 'vue-router';\n\n//Props \ndefineProps<{\n  /** The items to display */\n  items: Array<T>;\n  /** The title to display at the top of the layout */\n  title?: string;\n  /** If defined, the route to which the 'See more' button will redirect to */\n  route?: RouteParams|string;\n  /** The label on the 'See more' button */\n  buttonText?: string;\n}>();\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .overflow-phone-auto {\n    @media (width <= 960px) {\n      overflow-y: auto;\n      scroll-snap-type: x mandatory;\n\n      .classic-element-container{\n        scroll-snap-align: center;\n      }\n    }\n  }\n\n  .column {\n    flex-shrink: 0;\n    width: calc((100% - 420px - 1rem) / 2);\n\n    @media (width <= 1550px) {\n      width: calc((100% - 420px - 1rem));\n    }\n\n    @media (width <= 960px) {\n      width: auto;\n      flex-direction: row !important;\n    }\n  }\n\n  .column-margin {\n    margin-right: 1rem;\n\n    @media (width <= 960px) {\n      margin-right: 0;\n    }\n  }\n\n  .show-column {\n    display: flex;\n\n    @media (width <= 1550px) and (width > 960px) {\n      &.column {\n        display: none;\n      }\n    }\n  }\n}\n</style>\n","<!--\n  A simple layout to display 5 elements over 3 columns\n-->\n<template>\n  <div class=\"d-flex flex-column py-3\">\n    <h2 v-if=\"title\">\n      {{ title }}\n    </h2>\n    \n    <div class=\"d-flex flex-nowrap align-items-stretch overflow-phone-auto\">\n      <!-- First column & first item -->\n      <slot\n        v-if=\"items[0]\"\n        name=\"first\"\n        :item=\"items[0]\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"items[0]\"\n          :first=\"true\" />\n      </slot>\n\n      <!-- Second column & second/third items -->\n      <div\n        v-if=\"items.length > 1\"\n        class=\"column column-margin d-flex-row flex-nowrap\"\n        :class=\"items.length <= 3 ? 'flex-grow-1' : ''\"\n      >\n        <slot\n          v-if=\"items[1]\"\n          name=\"item\"\n          :item=\"items[1]\"\n          :first=\"false\"\n        />\n        <slot\n          v-if=\"items[2]\"\n          name=\"item\"\n          :item=\"items[2]\"\n          :first=\"false\"\n        />\n      </div>\n\n      <!-- Third column & fourth/fifth items -->\n      <div\n        v-if=\"items.length > 3\"\n        class=\"column d-flex-row flex-nowrap show-column\"\n      >\n        <slot\n          v-if=\"items[3]\"\n          name=\"item\"\n          :item=\"items[3]\"\n          :first=\"false\"\n        />\n        <slot\n          v-if=\"items[4]\"\n          name=\"item\"\n          :item=\"items[4]\"\n          :first=\"false\"\n        />\n      </div>\n    </div>\n\n    <!-- Redirection button -->\n    <router-link\n      v-if=\"route\"\n      :to=\"route\"\n      class=\"btn btn-primary align-self-center w-fit-content m-4\"\n    >\n      {{ buttonText || $t('See more') }}\n    </router-link>\n  </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { RouteParams } from 'vue-router';\n\n//Props \ndefineProps<{\n  /** The items to display */\n  items: Array<T>;\n  /** The title to display at the top of the layout */\n  title?: string;\n  /** If defined, the route to which the 'See more' button will redirect to */\n  route?: RouteParams|string;\n  /** The label on the 'See more' button */\n  buttonText?: string;\n}>();\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .overflow-phone-auto {\n    @media (width <= 960px) {\n      overflow-y: auto;\n      scroll-snap-type: x mandatory;\n\n      .classic-element-container{\n        scroll-snap-align: center;\n      }\n    }\n  }\n\n  .column {\n    flex-shrink: 0;\n    width: calc((100% - 420px - 1rem) / 2);\n\n    @media (width <= 1550px) {\n      width: calc((100% - 420px - 1rem));\n    }\n\n    @media (width <= 960px) {\n      width: auto;\n      flex-direction: row !important;\n    }\n  }\n\n  .column-margin {\n    margin-right: 1rem;\n\n    @media (width <= 960px) {\n      margin-right: 0;\n    }\n  }\n\n  .show-column {\n    display: flex;\n\n    @media (width <= 1550px) and (width > 960px) {\n      &.column {\n        display: none;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBCIO,OAAM,0BAAyB;;mBAK7B,OAAM,6DAA4D;;;CAoCnE,OAAM;;;;qBAzCZ,mBAkEM,OAlEN,YAkEM;EAjEM,OAAA,SAAA,UAAA,GAAV,mBAEK,MAAA,YAAA,gBADA,OAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;EAGV,mBAmDM,OAnDN,YAmDM;GAlDJ,mBAAA,6BAAA;GAEQ,OAAA,MAAK,KADb,WASO,KAAA,QAAA,SAAA;;IANJ,MAAM,OAAA,MAAK;YAMP,CAJL,WAGkB,KAAA,QAAA,QAAA;IADf,MAAM,OAAA,MAAK;IACX,OAAO;;GAGZ,mBAAA,sCAAA;GAEQ,OAAA,MAAM,SAAM,KAAA,UAAA,GADpB,mBAiBM,OAAA;;IAfJ,OAAK,eAAA,CAAC,+CACE,OAAA,MAAM,UAAM,IAAA,gBAAA,EAAA,CAAA;OAGZ,OAAA,MAAK,KADb,WAKE,KAAA,QAAA,QAAA;;IAFC,MAAM,OAAA,MAAK;IACX,OAAO;0CAGF,OAAA,MAAK,KADb,WAKE,KAAA,QAAA,QAAA;;IAFC,MAAM,OAAA,MAAK;IACX,OAAO;;GAIZ,mBAAA,qCAAA;GAEQ,OAAA,MAAM,SAAM,KAAA,UAAA,GADpB,mBAgBM,OAhBN,YAgBM,CAXI,OAAA,MAAK,KADb,WAKE,KAAA,QAAA,QAAA;;IAFC,MAAM,OAAA,MAAK;IACX,OAAO;0CAGF,OAAA,MAAK,KADb,WAKE,KAAA,QAAA,QAAA;;IAFC,MAAM,OAAA,MAAK;IACX,OAAO;;;EAKd,mBAAA,sBAAA;EAEQ,OAAA,SAAA,UAAA,GADR,YAMc,wBAAA;;GAJX,IAAI,OAAA;GACL,OAAM;;0BAE4B,CAAA,gBAAA,gBAA/B,OAAA,cAAc,KAAA,GAAE,UAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}