{"version":3,"mappings":";w1BAsDA,MAAMA,EAAQC,EAIR,CAAE,aAAAC,CAAa,EAAIC,IAAe,WAAW,GAAG,OAAO,QAEvD,CAAE,UAAAC,GAAcC,IAEhBC,GAAkB,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAL,GAAU,mBAE5BM,EAAUC,GAAS,KAAML,GAAA,YAAAA,EAAW,UAAW,CAAE,GAEjD,CAAE,WAAAM,CAAA,EAAeN,GAAa,GAC9BO,EAAgBD,GAAA,MAAAA,EAAY,aAC9BE,GAAAC,GAAAC,EAAAhB,EAAM,aAAN,YAAAgB,EAAkB,QAAlB,YAAAD,EAAyB,YAAzB,YAAAD,EAAoC,OAAO,CAAC,CAAE,KAAAG,CAAW,IAAAL,EAAWK,CAAI,GACxE,GACEC,EAAcN,GAAA,MAAAA,EAAY,YAAc,OAAO,SAASA,EAAW,WAAW,EAAI,EAAI,o6FC6C5F,KAAM,CAAE,KAAAO,CAAK,GAAU,CAAAZ,EAAAC,CAAA,EAAAC,EAAA,IAAAW,KAAS,SAAS,UAAU,oBAC7C,CAAE,sBAAAC,GAA0BC,KAE5B,CACJ,yBAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,gBAAAC,CACE,EAAAxB,EAAe,aAAW,GAAG,OAE3B,CAAE,aAAAyB,GAAiBC,KACnB,CAAE,gBAAAC,CAAoB,EAAAC,GAAYC,GAAc","names":["props","__props","brandClasses","useAppConfig","getFooter","useCms","cmsFooter","__temp","__restore","_withAsyncContext","columns","computed","storeIcons","appStoreLinks","_c","_b","_a","name","appStoreKey","data","useApi","enableLoyaltyFeatures","useFeatureFlags","showCustomizationContent","showLoyaltyContent","showSocialMediaLinks","showStoreLocator","loyaltyCtaTheme","DialogSignIn","useDialogsStore","isLoyaltyMember","storeToRefs","useUserStore"],"ignoreList":[],"sources":["../../../../../domains/commerce/components/vf/footer/Columns.vue","../../../../../brands/thenorthface/components/vf/footer/Footer.vue"],"sourcesContent":["<template>\n  <div class=\"md:flex md:gap-4 md:between divide-grey-70 <md:divide-y\" :class=\"brandClasses\">\n    <base-collapse\n      v-for=\"({ title, children }, key) in columns\"\n      :key\n      class=\"w-full md:py-8\"\n      class-content=\"md:max-h-screen children:md:!visible\"\n      class-toggle=\"w-full md:hidden\"\n    >\n      <template #toggle=\"{ expanded }\">\n        <span class=\"flex items-center title-3 between <md:p-4\">\n          {{ title }}\n          <vf-icon class=\"md:hidden\" :dir=\"expanded ? 'up' : 'down'\" name=\"chevron\" size=\"lg\" />\n        </span>\n      </template>\n\n      <h2 class=\"title-5 <md:hidden\">\n        {{ title }}\n      </h2>\n\n      <div class=\"<md:px-4 <md:pb-4\">\n        <ul class=\"text-sm md:mt-4 space-y-4 \">\n          <li v-for=\"(child, j) in children\" :key=\"j\" class=\"space-y-4\">\n            <lazy-cms-section\n              v-if=\"cmsFooter?.columns\"\n              :key=\"child.id\"\n              :section=\"{ name: child.id, items: [child] }\"\n            />\n            <cms-footer-item v-else :content=\"child\" :footer-item-l1-context-key=\"title\" />\n          </li>\n        </ul>\n      </div>\n\n      <ul v-if=\"appStoreLinks && key === appStoreKey\" class=\"md:mt-4 space-y-4 <md:px-4 <md:pb-4\">\n        <li v-for=\"({ icon, link, alt }, index) in appStoreLinks\" :key=\"index\" class=\"space-y-4\">\n          <base-link :to=\"link\">\n            <base-picture\n              :alt\n              height=\"36\"\n              :props-img=\"{ class: 'w-a' }\"\n              :src=\"icon\"\n              style=\"height: 2.25rem\"\n              width=\"108\"\n            />\n          </base-link>\n        </li>\n      </ul>\n    </base-collapse>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { GetFooterData } from '#root/api/clients/internal/data-contracts'\n\nconst props = defineProps<{\n  footerData: GetFooterData | null\n}>()\n\nconst { brandClasses } = useAppConfig().components.vf.footer.columns\n\nconst { getFooter } = useCms()\n\nconst cmsFooter = await getFooter()\n\nconst columns = computed(() => cmsFooter?.columns || [])\n\nconst { storeIcons } = cmsFooter || {}\nconst appStoreLinks = storeIcons?.storeColumn\n  ? props.footerData?.links?.appStores?.filter(({ name }) => storeIcons[name])\n  : []\nconst appStoreKey = storeIcons?.storeColumn ? Number.parseInt(storeIcons.storeColumn) - 1 : 0\n</script>\n","<template>\n  <footer\n    class=\"contain-content b-t b-grey-50 bg-white content-visibility-auto\"\n    style=\"contain-intrinsic-size: auto 100vw auto 51.875rem\"\n  >\n    <div class=\"mx-a divide-y divide-grey-70\" style=\"max-width: 90rem\">\n      <template v-if=\"enableLoyaltyFeatures && showLoyaltyContent\">\n        <section v-show=\"!isLoyaltyMember\" class=\"px-4 py-8 md:text-center\">\n          <div>\n            <h2 class=\"mb-2 title-3\">\n              {{ $t.footerContent.loyalty.header }}\n            </h2>\n            <p class=\"mb-6 text-sm fw-light md:mb-4\">\n              {{ $t.footerContent.loyalty.description }}\n            </p>\n          </div>\n          <vf-button\n            class=\"c-white <md:w-full\"\n            :size=\"{ sm: 'sm', md: 'xs' }\"\n            :theme=\"loyaltyCtaTheme\"\n            :variant=\"loyaltyCtaTheme ? 'themable' : 'primary'\"\n            @click=\"DialogSignIn.open({ formLocation: 'modal:single:footer:none' })\"\n          >\n            {{ $t.footerContent.loyalty.button }}\n          </vf-button>\n        </section>\n      </template>\n      <vf-footer-columns :footer-data=\"data\" />\n      <div class=\"py-8\">\n        <div v-style:w=\"{ md: '63.75rem' }\" class=\"md:mx-a md:flex divide-x divide-grey-70 <md:divide-y\">\n          <div\n            v-if=\"!hideNewsletter && enableLoyaltyFeatures && showLoyaltyContent\"\n            v-show=\"!pending\"\n            v-style:w=\"{ md: '21.5rem' }\"\n            class=\"f-col items-start px-4 pb-8 between md:pl-0 md:pr-4\"\n          >\n            <form-newsletter\n              class=\"w-full\"\n              class-heading=\"md:text-left\"\n              class-subheading=\"md:text-left text-sm\"\n              class-submit=\"md:self-start!\"\n              :show-hint=\"false\"\n            />\n          </div>\n\n          <div\n            v-style:w=\"{ md: '21.5rem' }\"\n            class=\"f-col items-start divide-y divide-grey-70 md:px-4\"\n          >\n            <section\n              v-if=\"showStoreLocator\"\n              class=\"f-col items-start <md:px-4 <md:py-8 md:pb-8\"\n              :class=\"{\n                'md:flex-row md:w-3/5 md:justify-evenly':\n                  !showLoyaltyContent && !showCustomizationContent,\n                'flex-1': showLoyaltyContent || showCustomizationContent,\n              }\"\n            >\n              <div>\n                <h2 class=\"mb-2 title-3\">\n                  {{ $t.footerContent.storeLocator.header }}\n                </h2>\n                <p class=\"mb-6 text-sm md:mb-4 fw-light\">\n                  {{ $t.footerContent.storeLocator.description }}\n                </p>\n              </div>\n              <vf-button\n                class=\"<md:w-full\"\n                :size=\"{ sm: 'sm', md: 'xs' }\"\n                to=\"/store-locator\"\n                @click=\"$gtm.push('footer.onClickFooterLink', 'Store Locator')\"\n              >\n                {{ $t.footerContent.storeLocator.button }}\n              </vf-button>\n            </section>\n          </div>\n          <div\n            v-style:w=\"{ md: '21.5rem' }\"\n            class=\"f-col items-start px-4 divide-y divide-grey-70 <md:py-8 md:pl-4 md:pr-0\"\n          >\n            <section\n              v-if=\"showSocialMediaLinks\"\n              class=\"items-start px-4 between\"\n            >\n              <div>\n                <h2 class=\"mb-2 title-3\">\n                  {{ $t.footerContent.social.header }}\n                </h2>\n                <div class=\"flex space-x-4 md:space-x-2\">\n                  <div v-for=\"(to, name) in data?.links?.social\" :key=\"name\">\n                    <base-link :aria-label=\"name\" :to>\n                      <vf-icon :name size=\"lg\" />\n                    </base-link>\n                  </div>\n                </div>\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n      <vf-footer-legal-links v-if=\"data?.links?.legal\" class=\"b-t b-grey-70 mx-0!\" :links=\"data.links.legal\">\n        <base-link class=\"<md:hidden\" to=\"/\">\n          <vf-logo loading=\"lazy\" style=\"max-width: 7.5rem\" />\n        </base-link>\n      </vf-footer-legal-links>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineProps<{\n  hideNewsletter?: boolean\n  pending?: boolean\n}>()\n\nconst { data } = await useApi().internal.getFooter()\nconst { enableLoyaltyFeatures } = useFeatureFlags()\n\nconst {\n  showCustomizationContent,\n  showLoyaltyContent,\n  showSocialMediaLinks,\n  showStoreLocator,\n  loyaltyCtaTheme\n} = useAppConfig().components.vf.footer\n\nconst { DialogSignIn } = useDialogsStore()\nconst { isLoyaltyMember } = storeToRefs(useUserStore())\n</script>\n"],"file":"_nuxt/emea/Bbj1xkIt.js"}