{"version":3,"file":"HouseholdIcons.e6d5943f.js","sources":["../../../../components/global/elements/HouseholdIcons.vue"],"sourcesContent":["<template>\n  <div class=\"household-icons\" :class=\"{ 'is-over-two': quantity > 2, 'is-over-eight': quantity > 8 }\">\n    <svg v-for=\"(icon, index) in qty\" :key=\"`icon-${index}`\" class=\"household-icons__icon\" viewBox=\"0 0 16 16\">\n      <use xlink:href=\"#user\" />\n    </svg>\n    <template v-if=\"displayPlus\">\n      <svg class=\"household-icons__icon is-plus\" viewBox=\"0 0 16 16\">\n        <use xlink:href=\"#plus\" />\n      </svg>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst props = defineProps({\n  quantity: {\n    type: Number,\n    default: 1,\n  },\n});\n\nconst max = 10;\n\nconst qty = computed(() => {\n  if (props.quantity > max) {\n    return max - 1;\n  }\n  return props.quantity;\n});\n\nconst displayPlus = computed(() => {\n  if (props.quantity > qty.value) {\n    return true;\n  }\n  return false;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.household-icons {\n  display: inline-grid;\n  grid-auto-flow: column;\n  grid-auto-columns: min-content;\n  justify-content: center;\n  align-content: center;\n\n  &.is-over-two {\n    grid-template-rows: repeat(2, min-content);\n    grid-template-columns: unset;\n  }\n\n  &.is-over-eight {\n    svg:nth-child(1),\n    svg:nth-child(2) {\n      @include tiny {\n        display: none;\n      }\n    }\n  }\n\n  &__icon {\n    width: rem(30);\n\n    .is-over-two & {\n      width: rem(17);\n    }\n\n    .is-over-eight & {\n      @include tiny {\n        width: rem(15);\n      }\n    }\n  }\n}\n</style>\n"],"names":["max","qty","computed","props","displayPlus"],"mappings":"4YAqBMA,EAAM,4FAENC,EAAMC,EAAS,IACfC,EAAM,SAAWH,EACZA,EAAM,EAERG,EAAM,QACd,EAEKC,EAAcF,EAAS,IACvBC,EAAM,SAAWF,EAAI,KAI1B"}