{"version":3,"file":"LandsideFooterV2-938e287c.js","sources":["../../../app/javascript/vuecomponents/LandsideFooterV2.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { dir } from '@@/bits/current_dir'\nimport { isAppUsing } from '@@/bits/flip'\nimport { __ } from '@@/bits/intl'\nimport {\n  LandsidePageTab,\n  SubscriptionFilter,\n  buildLandsidePagePath,\n  buildSubscriptionPagePath,\n} from '@@/bits/landside_helper'\nimport { buildUrlFromPath } from '@@/bits/location'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzIconButton, {\n  OzIconButtonColorScheme,\n  OzIconButtonSizePreset,\n} from '@@/library/v4/components/OzIconButton.vue'\nimport OzPadletLogo, {\n  OzPadletLogoColorScheme,\n  OzPadletLogoSizePreset,\n} from '@@/library/v4/components/OzPadletLogo.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { LandsidePage, useLandsideNavigationStore } from '@@/pinia/landside_navigation'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport type { VueCssClass } from '@@/types'\nimport LandsideCallToAction from '@@/vuecomponents/LandsideCallToAction.vue'\nimport type { LandsideNavigation } from '@@/vuecomponents/LandsideFooterSection.vue'\nimport LandsideFooterSection from '@@/vuecomponents/LandsideFooterSection.vue'\nimport LandsideFooterSvg from '@@/vuecomponents/LandsideFooterSvg.vue'\nimport LandsideHeaderFooterBorder from '@@/vuecomponents/LandsideHeaderFooterBorder.vue'\nimport LocaleSelector from '@@/vuecomponents/LocaleSelector.vue'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst { isSmallerThanDesktop, windowWidth } = storeToRefs(useWindowSizeStore())\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\nconst { currentPage, landsidePages, isUserLoggedIn } = storeToRefs(useLandsideNavigationStore())\n\nconst socialMediaIcons = [\n  {\n    icon: 'x_logo_filled',\n    url: 'https://twitter.com/padlet',\n    label: __('Twitter'),\n    testId: 'socialMediaButtonTwitter',\n    size: 18,\n  },\n  {\n    icon: 'youtube_filled',\n    url: 'https://www.youtube.com/@padlet',\n    label: __('Youtube'),\n    testId: 'socialMediaButtonYoutube',\n    size: 24,\n  },\n  {\n    icon: 'instagram_filled',\n    url: 'https://www.instagram.com/padlet',\n    label: __('Instagram'),\n    testId: 'socialMediaButtonInstagram',\n    size: 19,\n  },\n  {\n    icon: 'facebook_filled',\n    url: 'https://www.facebook.com/padlet/',\n    label: __('Facebook'),\n    testId: 'socialMediaButtonFacebook',\n    size: 24,\n  },\n  {\n    icon: 'linkedin_filled',\n    url: 'https://www.linkedin.com/company/padlet',\n    label: __('Linkedin'),\n    testId: 'socialMediaButtonLinkedin',\n    size: 18,\n  },\n]\n\nconst productNavigationItems: LandsideNavigation[] = [\n  { name: __('Board'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Board)) },\n  { name: __('Sandbox'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Sandbox)) },\n  { name: __('Pricing'), url: buildUrlFromPath(buildSubscriptionPagePath(SubscriptionFilter.ALL)) },\n  { name: __('Apps and integrations'), url: 'https://www.padlet.com/about/apps' },\n]\n\nconst solutionsNavigationItems: LandsideNavigation[] = [\n  { name: __('Templates'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Templates)) },\n  { name: __('Education'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Education)) },\n]\n\nconst supportNavigationItems: LandsideNavigation[] = [\n  { name: __('Knowledge base'), url: 'https://www.padlet.help' },\n  { name: __('Video tutorials'), url: 'https://www.youtube.com/padlet' },\n  { name: __('Developer docs'), url: 'https://docs.padlet.dev/' },\n  { name: __('Contact us'), url: 'https://www.padlet.com/contact-us' },\n]\n\nconst companyNavigationItems: LandsideNavigation[] = [\n  { name: __('About us'), url: 'https://www.padlet.com/about/us' },\n  { name: __('Jobs'), url: 'https://www.angel.co/company/padlet/jobs' },\n  { name: __('Blog'), url: 'https://padlet.blog/' },\n]\n\nconst legalNavigationItems: LandsideNavigation[] = [\n  { name: __('Terms of use'), url: 'https://legal.padlet.com/terms' },\n  { name: __('Privacy policy'), url: 'https://legal.padlet.com/privacy' },\n  { name: __('Content policy'), url: 'https://legal.padlet.com/content' },\n  { name: __('Accessibility statement'), url: 'https://legal.padlet.com/accessibility' },\n]\n\nconst footerIllustrationDarkUrl = 'https://padlet.net/homepage/v4/footer_illustration_dark.webp'\nconst footerIllustrationLightUrl = 'https://padlet.net/homepage/v4/footer_illustration_light.webp'\nconst ILLUSTRATION_ORIGINAL_IMAGE_WIDTH = 11520\nconst ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT = 1152\nconst illustrationContainer = ref<HTMLDivElement>()\n\n// We use maxAvailableWidth to handle the case when users zoom in/out which causes\n// the windowWidth to change\nconst maxAvailableWidth = computed((): number => {\n  if (!illustrationContainer.value) return windowWidth.value\n  return Math.max(illustrationContainer.value.clientWidth, windowWidth.value)\n})\n\nconst illustrationHeight = computed((): number => {\n  if (isSmallerThanDesktop.value) return 80\n  return 138\n})\n\nconst illustrationWidth = computed((): number => {\n  // We calculate the width of the illustration using the ratio (width / height) of the original image\n  return illustrationHeight.value * (ILLUSTRATION_ORIGINAL_IMAGE_WIDTH / ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT)\n})\n\nconst numberOfIllustrationsDisplayed = computed((): number => {\n  if (maxAvailableWidth.value < illustrationWidth.value) return 1\n  return Math.ceil(maxAvailableWidth.value / illustrationWidth.value)\n})\n\nconst lastIllustrationWidth = computed((): number => {\n  const remainingWidth = maxAvailableWidth.value - (numberOfIllustrationsDisplayed.value - 1) * illustrationWidth.value\n  return remainingWidth === 0 ? illustrationWidth.value : remainingWidth\n})\n\nconst isHomePage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Home\n})\n\nconst isBoardPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Board\n})\n\nconst isSandboxPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Sandbox\n})\n\nconst isEducationPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Education\n})\n\nconst useNewFooter = computed((): boolean => {\n  return (!isAppUsing('landsideSandboxV2') && isSandboxPage.value) || isHomePage.value\n})\n\nconst xCustomFooterBorder = computed((): boolean => {\n  return (\n    isBoardPage.value ||\n    currentPage.value === LandsidePage.Subscriptions ||\n    currentPage.value === LandsidePage.Templates ||\n    isEducationPage.value ||\n    (isAppUsing('landsideSandboxV2') && isSandboxPage.value)\n  )\n})\n\nconst useCustomTextColor = computed(() => {\n  return isEducationPage.value || isBoardPage.value || (isAppUsing('landsideSandboxV2') && isSandboxPage.value)\n})\n\nconst customTextColorClasses = computed<VueCssClass | undefined>(() => {\n  if (isDarkMode.value) return 'text-light-text-200'\n\n  switch (currentPage.value) {\n    case LandsidePage.Education:\n      return 'text-[rgba(3,51,0,0.54)]'\n    case LandsidePage.Board:\n      return 'text-[rgba(28,0,51,0.54)]'\n    case LandsidePage.Sandbox:\n      return 'text-[rgba(51,39,0,0.54)]'\n    default:\n      return ''\n  }\n})\n\nconst customIconColorClasses = computed<VueCssClass | undefined>(() => {\n  if (isDarkMode.value) return 'text-light-text-300'\n\n  switch (currentPage.value) {\n    case LandsidePage.Education:\n      return 'text-[rgba(3,51,0,0.38)]'\n    case LandsidePage.Board:\n      return 'text-[rgba(28,0,51,0.38)]'\n    case LandsidePage.Sandbox:\n      return 'text-[rgba(51,39,0,0.38)]'\n    default:\n      return ''\n  }\n})\n\nconst ringOffsetColorClasses = computed<VueCssClass | undefined>(() => {\n  switch (currentPage.value) {\n    case LandsidePage.Home:\n      return 'ring-offset-[#82D681] dark:ring-offset-[#385C37]'\n    case LandsidePage.Board:\n      return 'ring-offset-grape-0 dark:ring-offset-grey-800'\n    case LandsidePage.Sandbox:\n      return isAppUsing('landsideSandboxV2')\n        ? 'ring-offset-canary-0 dark:ring-offset-grey-800'\n        : 'ring-offset-canary-200 dark:ring-offset-grey-700'\n    case LandsidePage.Education:\n      return 'ring-offset-park-0 dark:ring-offset-grey-800'\n    default:\n      return 'ring-offset-light-ui-200 dark:ring-offset-dark-ui-200'\n  }\n})\n\nfunction handleObjectPosition(shouldReverse: boolean): string {\n  if (shouldReverse) {\n    // For rtl, we need to position the object from the left\n    if (dir() === 'ltr') return 'right'\n    return 'left'\n  }\n  if (dir() === 'ltr') return 'left'\n  return 'right'\n}\n\nconst xLandsideCallToAction = computed((): boolean => {\n  if (isUserLoggedIn.value) return false\n  if (currentPage.value === LandsidePage.Product) return true\n  if (currentPage.value === LandsidePage.Subscriptions) return true\n\n  return false\n})\n</script>\n\n<template>\n  <footer :class=\"['flex flex-col', 'mt-auto']\">\n    <LandsideCallToAction v-if=\"xLandsideCallToAction\" />\n    <LandsideHeaderFooterBorder\n      v-if=\"xCustomFooterBorder\"\n      :dark-mode=\"isDarkMode\"\n      :flip=\"currentPage !== LandsidePage.Board && currentPage !== LandsidePage.Sandbox\"\n    />\n    <div\n      v-else-if=\"!useNewFooter\"\n      ref=\"illustrationContainer\"\n      :class=\"['flex h-20 desktop:h-[138px] -mb-0.25', xLandsideCallToAction && 'mt-6 desktop:mt-24']\"\n    >\n      <ImageThumbnail\n        v-for=\"index in numberOfIllustrationsDisplayed\"\n        :key=\"index\"\n        :style=\"\n          index < numberOfIllustrationsDisplayed\n            ? { width: `${illustrationWidth}px` }\n            : { width: `${lastIllustrationWidth}px` }\n        \"\n        data-testid=\"footerIllustrationImage\"\n        :src=\"isDarkMode ? footerIllustrationDarkUrl : footerIllustrationLightUrl\"\n        :original-image-height=\"ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT\"\n        :original-image-width=\"ILLUSTRATION_ORIGINAL_IMAGE_WIDTH\"\n        :width=\"illustrationWidth\"\n        :height=\"illustrationHeight\"\n        resize-strategy=\"fit\"\n        :process-image=\"true\"\n        :object-position=\"handleObjectPosition(index % 2 === 0)\"\n        :flip-direction=\"index % 2 === 0 ? 'horizontal' : undefined\"\n        :lazy-loading=\"false\"\n        aria-hidden=\"true\"\n      />\n    </div>\n    <div\n      v-else\n      :class=\"[\n        'flex flex-row w-full overflow-x-hidden',\n        xLandsideCallToAction && 'pt-6 desktop:pt-24',\n        {\n          'bg-canary-0 dark:bg-dark-ui-200': isSandboxPage,\n          'bg-[#C3E776]': isHomePage,\n        },\n      ]\"\n    >\n      <LandsideFooterSvg\n        v-for=\"i in Math.ceil(windowWidth / 2211)\"\n        :key=\"i\"\n        :class=\"[\n          'overflow-x-hidden',\n          i === 0 ? 'grow' : 'shrink-0',\n          {\n            'text-[#FFEBA4] dark:text-[#3C3D40]': isSandboxPage,\n            'text-[#82D681] dark:text-[#385C37]': isHomePage,\n          },\n        ]\"\n        :transform=\"i % 2 === 1 ? 'scale(-1,1)' : ''\"\n      />\n    </div>\n    <div\n      :class=\"[\n        'flex flex-col',\n        'desktop:items-center',\n        {\n          'bg-[#82D681] dark:bg-[#385C37]': isHomePage,\n          'bg-grape-0 dark:bg-grey-800': isBoardPage,\n          'bg-canary-200 dark:bg-grey-700': !isAppUsing('landsideSandboxV2') && isSandboxPage,\n          'bg-canary-0 dark:bg-grey-800': isAppUsing('landsideSandboxV2') && isSandboxPage,\n          'bg-park-0 dark:bg-grey-800': isEducationPage,\n          'bg-light-ui-200 dark:bg-dark-ui-200': !isHomePage && !isSandboxPage && !isEducationPage && !isBoardPage,\n        },\n      ]\"\n    >\n      <!-- On desktop, users navigate from social media icons to the main pages -->\n      <div v-if=\"!isSmallerThanDesktop\" :class=\"['flex flex-row', 'pt-12 pb-16', 'items-start', 'w-320']\">\n        <!-- :Padlet segment -->\n        <div :class=\"['flex flex-col', 'items-start', 'pt-0.75', 'mt-0', 'mb-0', 'w-70']\">\n          <OzPadletLogo\n            :size-preset=\"OzPadletLogoSizePreset.H24px\"\n            :x-crane-icon=\"true\"\n            :color-scheme=\"OzPadletLogoColorScheme.Text100\"\n            :href=\"landsidePages[0].href\"\n            class=\"mb-2\"\n          />\n          <span\n            :class=\"[\n              'w-[186px]',\n              'mb-3.5',\n              'text-body-extra-small',\n              'text-start',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ __('Oh wow, you’re so beautiful. Just saying!') }}</span\n          >\n          <nav :aria-label=\"__('Social media')\">\n            <ul class=\"flex mb-4.5\">\n              <li v-for=\"(socialMediaIcon, index) in socialMediaIcons\" :key=\"index\">\n                <OzPlainButton\n                  :size-preset=\"OzPlainButtonSizePreset.Bare\"\n                  :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                  :href=\"socialMediaIcon.url\"\n                  :aria-label=\"socialMediaIcon.label\"\n                  :data-testid=\"socialMediaIcon.testId\"\n                  class=\"group w-9 h-9 rounded-xl focus-visible:ring-[2.5px]\"\n                >\n                  <OzIcon\n                    :name=\"socialMediaIcon.icon\"\n                    :size=\"socialMediaIcon.size\"\n                    :class=\"[\n                      // Base\n                      useCustomTextColor ? customIconColorClasses : 'text-dark-text-300 dark:text-light-text-300',\n                      // Hover\n                      'group-hover:text-dark-text-200 dark:group-hover:text-light-text-200',\n                      // Active\n                      'group-active:text-grape-500 dark:group-active:text-canary-500',\n                    ]\"\n                  />\n                </OzPlainButton>\n              </li>\n            </ul>\n          </nav>\n          <div class=\"flex space-s-2.5 items-center\">\n            <OzIconButton\n              icon-name=\"accessibility_outline\"\n              :label=\"__('Accessibility')\"\n              :size-preset=\"OzIconButtonSizePreset.H32px\"\n              :icon-size=\"20\"\n              :color-scheme=\"OzIconButtonColorScheme.Bare\"\n              data-testid=\"accessibilityButton\"\n              href=\"https://legal.padlet.com/accessibility\"\n              :ring-offset-color-classes=\"ringOffsetColorClasses\"\n              :class=\"[\n                // Base\n                'bg-button-light dark:bg-button-dark',\n                useCustomTextColor ? customTextColorClasses : 'text-dark-text-200 dark:text-light-text-200',\n                // Hover\n                'hover-hover:hover:bg-button-hover-light hover-hover:dark:hover:bg-button-hover-dark',\n                // Focus\n                'focus-visible:ring-[2.5px] ring-grape-500 dark:ring-canary-500 ring-offset-[1.5px]',\n              ]\"\n            />\n            <section :aria-label=\"__('Language selection')\">\n              <LocaleSelector\n                :should-bold-dropdown-button-text=\"true\"\n                :dropdown-button-ring-offset-color-classes=\"ringOffsetColorClasses\"\n                :dropdown-button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n              />\n            </section>\n          </div>\n        </div>\n\n        <div :class=\"['flex flex-1 flex-row', 'justify-around', 'space-s-4', 'ms-4']\">\n          <!-- Products segment -->\n          <LandsideFooterSection\n            :title=\"__('Product')\"\n            :navigation-items=\"productNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Solutions segment -->\n          <LandsideFooterSection\n            :title=\"__('Solutions')\"\n            :navigation-items=\"solutionsNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Support segment -->\n          <LandsideFooterSection\n            :title=\"__('Support')\"\n            :navigation-items=\"supportNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Company segment -->\n          <LandsideFooterSection\n            :title=\"__('Company')\"\n            :navigation-items=\"companyNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Legal segment -->\n          <LandsideFooterSection\n            :title=\"__('Legal')\"\n            :x-divider=\"false\"\n            :navigation-items=\"legalNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n        </div>\n      </div>\n      <!-- On tablet/mobile, users navigate from the main pages to social media icons -->\n      <div v-else :class=\"['flex flex-col', xCustomFooterBorder && 'pt-6']\">\n        <div :class=\"['flex flex-1 flex-col']\">\n          <!-- Products segment -->\n          <LandsideFooterSection\n            :title=\"__('Product')\"\n            :navigation-items=\"productNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Solutions segment -->\n          <LandsideFooterSection\n            :title=\"__('Solutions')\"\n            :navigation-items=\"solutionsNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Support segment -->\n          <LandsideFooterSection\n            :title=\"__('Support')\"\n            :navigation-items=\"supportNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Company segment -->\n          <LandsideFooterSection\n            :title=\"__('Company')\"\n            :navigation-items=\"companyNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Legal segment -->\n          <LandsideFooterSection\n            :title=\"__('Legal')\"\n            :x-divider=\"false\"\n            :navigation-items=\"legalNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n        </div>\n\n        <!-- :Padlet segment -->\n        <div :class=\"['flex flex-col', 'items-center', 'pt-0.75', 'mt-8', 'mb-11']\">\n          <OzPadletLogo\n            :size-preset=\"OzPadletLogoSizePreset.H24px\"\n            :x-crane-icon=\"true\"\n            :color-scheme=\"OzPadletLogoColorScheme.Text100\"\n            :href=\"landsidePages[0].href\"\n            class=\"mb-2\"\n          />\n          <span\n            :class=\"[\n              'w-[186px]',\n              'mb-3.5',\n              'text-body-extra-small',\n              'text-center desktop:text-start',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ __('Oh wow, you’re so beautiful. Just saying!') }}</span\n          >\n          <nav :aria-label=\"__('Social media')\">\n            <ul class=\"flex mb-4.5\">\n              <li v-for=\"(socialMediaIcon, index) in socialMediaIcons\" :key=\"index\">\n                <OzPlainButton\n                  :size-preset=\"OzPlainButtonSizePreset.Bare\"\n                  :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                  :href=\"socialMediaIcon.url\"\n                  :aria-label=\"socialMediaIcon.label\"\n                  :data-testid=\"socialMediaIcon.testId\"\n                  class=\"group w-9 h-9 rounded-xl focus-visible:ring-[2.5px]\"\n                >\n                  <OzIcon\n                    :name=\"socialMediaIcon.icon\"\n                    :size=\"socialMediaIcon.size\"\n                    :class=\"[\n                      // Base\n                      useCustomTextColor ? customIconColorClasses : 'text-dark-text-300 dark:text-light-text-300',\n                      // Hover\n                      'group-hover:text-dark-text-200 dark:group-hover:text-light-text-200',\n                      // Active\n                      'group-active:text-grape-500 dark:group-active:text-canary-500',\n                    ]\"\n                  />\n                </OzPlainButton>\n              </li>\n            </ul>\n          </nav>\n          <div class=\"flex space-s-2.5 items-center\">\n            <OzIconButton\n              icon-name=\"accessibility_outline\"\n              :label=\"__('Accessibility')\"\n              :size-preset=\"OzIconButtonSizePreset.H32px\"\n              :icon-size=\"20\"\n              :color-scheme=\"OzIconButtonColorScheme.Bare\"\n              data-testid=\"accessibilityButton\"\n              href=\"https://legal.padlet.com/accessibility\"\n              :ring-offset-color-classes=\"ringOffsetColorClasses\"\n              :class=\"[\n                // Base\n                'bg-button-light dark:bg-button-dark',\n                useCustomTextColor ? customTextColorClasses : 'text-dark-text-200 dark:text-light-text-200',\n                // Hover\n                'hover-hover:hover:bg-button-hover-light hover-hover:dark:hover:bg-button-hover-dark',\n                // Focus\n                'focus-visible:ring-[2.5px] ring-grape-500 dark:ring-canary-500 ring-offset-[1.5px]',\n              ]\"\n            />\n            <section :aria-label=\"__('Language selection')\">\n              <LocaleSelector\n                :should-bold-dropdown-button-text=\"true\"\n                :dropdown-button-ring-offset-color-classes=\"ringOffsetColorClasses\"\n                :dropdown-button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n              />\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n"],"names":["isSmallerThanDesktop","windowWidth","storeToRefs","useWindowSizeStore","isDarkMode","useDarkModeStore","currentPage","landsidePages","isUserLoggedIn","useLandsideNavigationStore","socialMediaIcons","icon","url","label","__","testId","size","productNavigationItems","name","buildUrlFromPath","buildLandsidePagePath","LandsidePageTab","Board","Sandbox","buildSubscriptionPagePath","SubscriptionFilter","ALL","solutionsNavigationItems","Templates","Education","supportNavigationItems","companyNavigationItems","legalNavigationItems","footerIllustrationDarkUrl","footerIllustrationLightUrl","ILLUSTRATION_ORIGINAL_IMAGE_WIDTH","ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT","illustrationContainer","ref","maxAvailableWidth","computed","value","Math","max","clientWidth","illustrationHeight","illustrationWidth","numberOfIllustrationsDisplayed","ceil","lastIllustrationWidth","remainingWidth","isHomePage","LandsidePage","Home","isBoardPage","isSandboxPage","isEducationPage","useNewFooter","isAppUsing","xCustomFooterBorder","Subscriptions","useCustomTextColor","customTextColorClasses","customIconColorClasses","ringOffsetColorClasses","handleObjectPosition","shouldReverse","dir","xLandsideCallToAction","Product"],"mappings":"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"}