{"version":3,"mappings":";w0NAeA,IAAKA,OACHA,EAAA,MAAQ,QADLA,OAAA,IAKL,MAAAC,GAAe,+tGCEf,MAAMC,EAAmBC,EAAqB,UAAM,OAAO,gCAAuC,kSAAC,EAC7FC,EAAmCD,EACvC,UAAM,OAAO,gDAAuD,sXACtE,EACME,EAAwCF,EAC5C,UAAM,OAAO,qDAA4D,iSAC3E,EAEMG,EAAeC,KACf,CACJC,UACAC,gBACAC,eACAC,eACAC,QACAC,cACAC,sBACAC,cACAC,UACAC,aACAC,sBACAC,kBACAC,iBACAC,iCACAC,OACAC,6BACAC,QACAC,WACAC,aACAC,kBACF,EAAIC,EAAYtB,CAAY,EAEtBuB,EAAsBC,KACtB,CAAEC,aAAYC,mBAAkBC,qBAAoBC,6BAA4B,EACpFN,EAAYC,CAAmB,EAE3B,CAAEM,2BAA0B,EAAIP,EAAYQ,IAA0C,EAEtFC,EAAgBC,EAAS,IAAMhB,EAAKiB,MAAMC,UAAU,EAEpDC,EAA0BH,EAAS,IACnC1B,EAAM2B,MACDxB,EAAYwB,MAEdzB,EAAoByB,KAC5B,EAEG,IAAAG,EAEJ,MAAMC,EAA2BA,IAAM,CAC/B,MAAAC,EAAWC,SAASC,eAAe,gBAAgB,EACpDF,IACLF,EAAiBK,GAAkBH,EAAUI,GAASC,EAAoB,GAAG,CAAC,IAShFC,GAAM9B,EAAgB,IAAM,CAC1B+B,EAAS,IAAM,CACbT,WAAgBU,aACST,GAC3B,CAAC,CACH,CAAC,EAKK,MAAAU,EAAgCC,EAAI,EAAK,EACzCC,EAA2BjB,EAC/B,IAAMe,EAA8Bd,QAAU,IAAQlB,EAA+BkB,QAAU,EACjG,EACAiB,GAAU,SAAY,CAEhBnB,EAAcE,OAAS,CAAC9B,GAC1BH,EAAamD,qCAAqC,EAGjCR,IACMN,IACKU,EAAAd,MAAQ,MAAMmB,IAC9C,CAAC,EAEDC,GAAgB,IAAM,CACpBjB,WAAgBU,YAClB,CAAC,EAED,MAAMH,EAAqBA,IAAM,CAC3B9B,EAAgBoB,OAClBY,EAAS,IAAM,CACP,MAAAP,EAAWC,SAASC,eAAe,gBAAgB,EACpDF,GACLtC,EAAasD,aAAa,CAAEC,OAAQjB,EAASkB,sBAAsB,EAAED,MAAO,CAAC,CAC/E,CAAC,GAICE,EAAsBT,IACtBU,EAAWA,IAAY,CACtBD,EAAoBxB,OACzBwB,EAAoBxB,MAAMyB,YAGfC,EAAA,CACXD,UACF,CAAC,EAED,MAAME,EAAeZ,EACnB,IACF,EACMa,EAA4BC,KAC5BC,EAAW/B,EAAS,IAAM,OAC9B,OAAO6B,EAA0BG,yBAAyBJ,IAAa3B,QAAb2B,cAAoBK,IAAIC,cAAe,GAAK,GAAK,CAC7G,CAAC","names":["SizePreset","__default__","SurfaceSearchBar","defineAsyncComponent","SurfaceWhiteboardHeaderCornerNav","SurfaceWhiteboardEmbedHeaderCornerNav","surfaceStore","useSurfaceStore","xHeader","isElectronApp","searchBarTop","isWhiteboard","isMap","headerColor","backgroundLuminance","colorScheme","homeUrl","isReadOnly","isSubmissionRequest","isDesktopLayout","isMobileLayout","isUserHostingZoomCollaboration","user","hasSidePanelOutsideSurface","title","portrait","isEmbedded","isNonLtiEmbedded","storeToRefs","whiteboardModeStore","useWhiteboardModeStore","isPlayMode","isScreenshotMode","isFramePreviewMode","isFullWidthFramePreviewMode","demoPadletPanelVisibility","useSurfaceOnboardingDemoPadletPanelStore","amIRegistered","computed","value","registered","realBackgroundLuminance","resizeObserver","observeHeaderSizeChanges","headerEl","document","getElementById","observeSizeChange","debounce","updateHeaderHeight","watch","nextTick","disconnect","isUserInZoomCollaborationMode","ref","isZoomCollaborationGuest","onMounted","checkAndSubscribeToPushNotifications","checkIfUserIsInZoomCollaborateMode","onBeforeUnmount","resizeHeader","height","getBoundingClientRect","surfaceHeaderMobile","collapse","expose","cornerNavRef","surfaceContainerSizeStore","useSurfaceContainerSizeStore","maxWidth","surfaceContainerWidth","$el","offsetWidth"],"ignoreList":[],"sources":["../../../app/javascript/library/v4/components/OzPadletCraneIcon.vue","../../../app/javascript/vuecomponents/SurfaceWhiteboardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nwithDefaults(\n  defineProps<{\n    /**\n     * Size preset.\n     */\n    sizePreset?: SizePreset\n  }>(),\n  {\n    sizePreset: SizePreset.W24px,\n  },\n)\n</script>\n\n<script lang=\"ts\">\nenum SizePreset {\n  W24px = 'W24px',\n}\n\nexport { SizePreset as OzPadletCraneIconSizePreset }\nexport default {}\n</script>\n\n<template>\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n    data-testid=\"padletLogoCraneIcon\"\n    :class=\"[\n      'crane-icon',\n      'group-active:transition-transform group-active:scale-[1.2]',\n\n      /**\n       * SIZE PRESETS\n       */\n      sizePreset === SizePreset.W24px && 'w-6 h-6',\n    ]\"\n  >\n    <path\n      d=\"M22.44 11.7559L21.2394 9.5611C21.2394 9.5611 21.2376 9.5575 21.237 9.5557C21.2322 9.5455 21.2268 9.5359 21.2214 9.5257C21.2076 9.5011 21.1926 9.4777 21.1752 9.4555C21.1428 9.4105 21.1026 9.3697 21.0594 9.3355C21.0378 9.3181 21.015 9.3031 20.9916 9.2893C20.9556 9.2677 20.9184 9.2503 20.8794 9.2371C20.8692 9.2335 20.8602 9.2305 20.8512 9.2281C20.7936 9.2107 20.7336 9.2017 20.6724 9.2017H18.5016C18.4164 9.2017 18.3318 9.2197 18.2538 9.2533L15.5856 10.4041L13.0926 4.6123C12.9084 4.1833 12.4644 3.8905 11.9898 3.8833H11.9706C11.496 3.8905 11.0526 4.1833 10.8678 4.6111L8.36937 10.4155L4.01217 8.0137C3.86637 7.9333 3.70377 7.8907 3.54117 7.8907C3.19677 7.8907 2.87457 8.0779 2.69937 8.3791C2.52477 8.6797 2.52477 9.0403 2.69937 9.3445C2.69997 9.3475 2.70177 9.3499 2.70417 9.3517L2.91957 9.7165L8.44257 19.3549C8.44797 19.3651 8.45397 19.3753 8.45997 19.3849L8.46417 19.3915C8.72997 19.8337 9.20997 20.1163 9.75177 20.1163C9.86397 20.1163 9.97617 20.1037 10.0854 20.0791L11.9802 19.6483L13.8744 20.0791C13.9836 20.1037 14.097 20.1163 14.2092 20.1163C14.7978 20.1163 15.3144 19.7827 15.5604 19.2727L17.097 16.5907L19.8408 12.2899C19.8546 12.2971 19.8678 12.3043 19.8816 12.3109L21.282 12.9769C21.4032 13.0345 21.5316 13.0639 21.6636 13.0639C21.9738 13.0639 22.2648 12.8977 22.425 12.6283C22.5852 12.3583 22.5906 12.0319 22.4394 11.7547L22.44 11.7559ZM12.4458 4.7377C12.4758 4.7737 12.4998 4.8145 12.519 4.8589C12.4944 4.8163 12.4704 4.7761 12.4458 4.7377Z\"\n      fill=\"black\"\n    />\n    <path\n      d=\"M21.891 12.0552C22.0116 12.276 21.7788 12.522 21.5514 12.414L20.1504 11.7486L20.6724 9.82617L21.8904 12.0552H21.891Z\"\n      fill=\"#CED0D4\"\n    />\n    <path\n      d=\"M12.519 4.85808L16.404 13.8839L12.2904 14.4719L11.9808 4.50708C12.1986 4.51008 12.4278 4.64568 12.5196 4.85808H12.519Z\"\n      fill=\"#FFD54F\"\n    />\n    <path\n      d=\"M16.404 13.884L15.0654 18.8088C14.958 19.2816 14.487 19.578 14.0136 19.4706L11.9808 19.0092L12.2934 15.0972L16.4046 13.8846L16.404 13.884Z\"\n      fill=\"#FF833E\"\n    />\n    <path\n      d=\"M11.9802 4.50708L11.6676 14.4719L7.5564 13.8839L11.4414 4.85808C11.5332 4.64568 11.7624 4.51008 11.9802 4.50708Z\"\n      fill=\"#53E047\"\n    />\n    <path\n      d=\"M11.6676 15.0972L11.9802 19.0092L9.94741 19.4706C9.47401 19.578 9.00301 19.2816 8.89501 18.8088L7.55701 13.884L11.6682 15.0966L11.6676 15.0972Z\"\n      fill=\"#9466E8\"\n    />\n    <path\n      d=\"M16.9782 13.6374C17.034 13.767 17.0442 13.9116 17.007 14.0478L16.2858 16.7016L20.6724 9.82617H18.501L15.8328 10.9776L16.9776 13.6374H16.9782Z\"\n      fill=\"#FF4081\"\n    />\n    <path\n      d=\"M6.95401 14.0479C6.91681 13.9117 6.92701 13.7671 6.98281 13.6375L8.12161 10.9915L3.71041 8.55966C3.40381 8.39046 3.06841 8.73126 3.24241 9.03486L7.70941 16.8277L6.95401 14.0479Z\"\n      fill=\"#3992DE\"\n    />\n  </svg>\n</template>\n","<script lang=\"ts\" setup>\nimport { isTouchScreen } from '@@/bits/browser'\nimport { dir } from '@@/bits/current_dir'\nimport type { ResizeObserver } from '@@/bits/global'\nimport { __ } from '@@/bits/intl'\nimport { observeSizeChange } from '@@/bits/resize_observer'\nimport { defineAsyncComponent } from '@@/bits/vue'\nimport { checkIfUserIsInZoomCollaborateMode } from '@@/bits/zoom'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzPadletCraneIcon from '@@/library/v4/components/OzPadletCraneIcon.vue'\nimport { useSurfaceStore } from '@@/pinia/surface'\nimport { useSurfaceContainerSizeStore } from '@@/pinia/surface_container_size'\nimport { useSurfaceOnboardingDemoPadletPanelStore } from '@@/pinia/surface_onboarding_demo_padlet_panel_store'\nimport { useWhiteboardModeStore } from '@@/pinia/whiteboard_mode'\nimport type SurfaceHeaderMobile from '@@/vuecomponents/SurfaceHeaderMobile.vue'\nimport SurfacePadletLogoInScreenshotMode from '@@/vuecomponents/SurfacePadletLogoInScreenshotMode.vue'\nimport SurfaceWhiteboardModeSwitcher from '@@/vuecomponents/SurfaceWhiteboardModeSwitcher.vue'\nimport ProcessedImage from '@@/vuecomponents/processed_image.vue'\nimport { debounce } from 'lodash-es'\nimport { storeToRefs } from 'pinia'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nconst SurfaceSearchBar = defineAsyncComponent(() => import('@@/vuecomponents/SurfaceSearchBar.vue'))\nconst SurfaceWhiteboardHeaderCornerNav = defineAsyncComponent(\n  () => import('@@/vuecomponents/SurfaceWhiteboardHeaderCornerNav.vue'),\n)\nconst SurfaceWhiteboardEmbedHeaderCornerNav = defineAsyncComponent(\n  () => import('@@/vuecomponents/SurfaceWhiteboardEmbedHeaderCornerNav.vue'),\n)\n\nconst surfaceStore = useSurfaceStore()\nconst {\n  xHeader,\n  isElectronApp,\n  searchBarTop,\n  isWhiteboard,\n  isMap,\n  headerColor,\n  backgroundLuminance,\n  colorScheme,\n  homeUrl,\n  isReadOnly,\n  isSubmissionRequest,\n  isDesktopLayout,\n  isMobileLayout,\n  isUserHostingZoomCollaboration,\n  user,\n  hasSidePanelOutsideSurface,\n  title,\n  portrait,\n  isEmbedded,\n  isNonLtiEmbedded,\n} = storeToRefs(surfaceStore)\n\nconst whiteboardModeStore = useWhiteboardModeStore()\nconst { isPlayMode, isScreenshotMode, isFramePreviewMode, isFullWidthFramePreviewMode } =\n  storeToRefs(whiteboardModeStore)\n\nconst { demoPadletPanelVisibility } = storeToRefs(useSurfaceOnboardingDemoPadletPanelStore())\n\nconst amIRegistered = computed(() => user.value.registered)\n\nconst realBackgroundLuminance = computed(() => {\n  if (isMap.value) {\n    return colorScheme.value\n  }\n  return backgroundLuminance.value\n})\n\nlet resizeObserver: ResizeObserver | null\n\nconst observeHeaderSizeChanges = () => {\n  const headerEl = document.getElementById('surface-header')\n  if (!headerEl) return\n  resizeObserver = observeSizeChange(headerEl, debounce(updateHeaderHeight, 250))\n}\n\n/**\n * Since this component doesn't have an unique root element,\n * we need to watch for the values that participate in the displaying conditions.\n * If we don't do this, we'll lose the $el reference every time the root\n * element changes, and the ResizeObserver will stop working.\n */\nwatch(isMobileLayout, () => {\n  nextTick(() => {\n    resizeObserver?.disconnect()\n    observeHeaderSizeChanges()\n  })\n})\n\n/**\n * ZOOM\n */\nconst isUserInZoomCollaborationMode = ref(false)\nconst isZoomCollaborationGuest = computed(\n  () => isUserInZoomCollaborationMode.value === true && isUserHostingZoomCollaboration.value === false,\n)\nonMounted(async () => {\n  // Don't prompt for notifications if the user is not registered and the app is not the electron app\n  if (amIRegistered.value && !isElectronApp) {\n    surfaceStore.checkAndSubscribeToPushNotifications()\n  }\n\n  updateHeaderHeight()\n  observeHeaderSizeChanges()\n  isUserInZoomCollaborationMode.value = await checkIfUserIsInZoomCollaborateMode()\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n})\n\nconst updateHeaderHeight = () => {\n  if (isDesktopLayout.value) {\n    nextTick(() => {\n      const headerEl = document.getElementById('surface-header')\n      if (!headerEl) return\n      surfaceStore.resizeHeader({ height: headerEl.getBoundingClientRect().height })\n    })\n  }\n}\n\nconst surfaceHeaderMobile = ref<InstanceType<typeof SurfaceHeaderMobile>>()\nconst collapse = (): void => {\n  if (!surfaceHeaderMobile.value) return\n  surfaceHeaderMobile.value.collapse()\n}\n\ndefineExpose({\n  collapse,\n})\n\nconst cornerNavRef = ref<typeof SurfaceWhiteboardHeaderCornerNav | typeof SurfaceWhiteboardEmbedHeaderCornerNav | null>(\n  null,\n)\nconst surfaceContainerSizeStore = useSurfaceContainerSizeStore()\nconst maxWidth = computed(() => {\n  return surfaceContainerSizeStore.surfaceContainerWidth - (cornerNavRef.value?.$el.offsetWidth ?? 0) - 40 - 8 // 40px is the padding of the header. 8 is gap between corner nav and title\n})\n</script>\n\n<template>\n  <div\n    id=\"surface-header\"\n    data-testid=\"surfaceHeader\"\n    :dir=\"dir()\"\n    :class=\"['app-bar', 'surface-header', 'relative']\"\n    :data-luminance=\"realBackgroundLuminance\"\n    :style=\"{ backgroundColor: headerColor }\"\n  >\n    <div class=\"my-3 tablet-landscape:my-3.5 ms-3.5 me-4 tablet-landscape:mx-5 items-center\">\n      <div class=\"flex flex-row items-center\" :style=\"{ maxWidth: maxWidth + 'px' }\">\n        <a\n          v-if=\"xHeader && !isElectronApp && !isZoomCollaborationGuest\"\n          :class=\"[\n            'group',\n            'flex',\n            'items-center',\n            'justify-center',\n            'w-6 h-6',\n            'outline-none',\n            {\n              'focus-visible:rounded-lg': true,\n              'focus-visible:ring-2': true,\n              'ring-grape-500': backgroundLuminance === 'light',\n              'ring-canary-500': backgroundLuminance === 'dark',\n            },\n          ]\"\n          :href=\"homeUrl\"\n          :aria-label=\"__('Go to Padlet home')\"\n          data-testid=\"goToPadletHome\"\n        >\n          <!-- Show portrait/padlet icon by default -->\n          <OzPadletCraneIcon\n            v-if=\"!portrait\"\n            :class=\"[\n              'block',\n              !isEmbedded && 'hover-hover:group-hover:hidden group-focus-visible:hidden group-active:hidden',\n            ]\"\n          />\n          <ProcessedImage\n            :class=\"[\n              'block',\n              !isEmbedded && 'hover-hover:group-hover:hidden group-focus-visible:hidden group-active:hidden',\n              'rounded-lg',\n            ]\"\n            :src=\"portrait\"\n            :width=\"24\"\n            :height=\"24\"\n            :transforms=\"{ preset: 'icon', width: 48, height: 48 }\"\n          />\n\n          <!-- Show chevron on hover/focus -->\n          <OzIcon\n            v-if=\"!isEmbedded\"\n            name=\"chevron_left_center\"\n            :class=\"[\n              'hidden',\n              'hover-hover:group-hover:block',\n              'group-focus-visible:block',\n              'group-active:block',\n              'select-none',\n              {\n                'text-dark-text-200': backgroundLuminance === 'light',\n                'text-light-text-200': backgroundLuminance === 'dark',\n              },\n              {\n                'group-active:text-grape-500': backgroundLuminance === 'light',\n                'group-active:text-canary-500': backgroundLuminance === 'dark',\n              },\n            ]\"\n            :size=\"16\"\n          />\n        </a>\n\n        <h1\n          data-testid=\"surfaceTitle\"\n          :class=\"{\n            'ms-2': true,\n            shrink: true,\n            'text-body-small font-semibold truncate font-sans': true,\n            'text-dark-text-100': backgroundLuminance === 'light',\n            'text-light-text-100': backgroundLuminance === 'dark',\n          }\"\n          v-text=\"title || __('Untitled padlet')\"\n        />\n        <SurfaceWhiteboardModeSwitcher\n          v-if=\"\n            surfaceContainerSizeStore.isContainerBiggerThanTabletLandscape &&\n            !(isTouchScreen() && surfaceContainerSizeStore.isLandscapeTablet) &&\n            !isScreenshotMode &&\n            !isNonLtiEmbedded\n          \"\n          :background-luminance=\"surfaceStore.backgroundLuminance\"\n          :class=\"['shrink-0', 'ms-2']\"\n        />\n      </div>\n      <SurfaceWhiteboardHeaderCornerNav\n        v-if=\"!isPlayMode && !isScreenshotMode && !isNonLtiEmbedded\"\n        ref=\"cornerNavRef\"\n      />\n      <SurfaceWhiteboardEmbedHeaderCornerNav v-if=\"isNonLtiEmbedded\" ref=\"cornerNavRef\" />\n      <SurfacePadletLogoInScreenshotMode\n        v-if=\"isScreenshotMode && !isFramePreviewMode && !isFullWidthFramePreviewMode\"\n      />\n    </div>\n\n    <!-- SurfaceHeader's size will change depending on whether the vertical scrollbar appears -->\n    <!-- or not. Since we want to keep the search f bar's position fixed regardless of that, we -->\n    <!-- use `position: fixed` and update its `top` when we scroll. See `surface_container.vue` -->\n    <!-- `handlePageScroll` method. -->\n    <!-- Distance of search bar from  -->\n    <!-- 488px because size of panel is 400px when smaller than tablet portrait -->\n    <!-- 568px because size of panel is 480px when smaller than tablet portrait -->\n    <div\n      v-if=\"!isReadOnly && !isSubmissionRequest\"\n      :class=\"[\n        'fixed z-search-bar flex items-center h-10',\n        hasSidePanelOutsideSurface ? 'end-22 @desktop/surface-container:end-42' : 'end-22',\n      ]\"\n      :style=\"{\n        top: `${searchBarTop}px`,\n      }\"\n    >\n      <SurfaceSearchBar v-if=\"!isWhiteboard && demoPadletPanelVisibility.showSurfaceSearchBar\" />\n    </div>\n  </div>\n</template>\n"],"file":"assets/SurfaceWhiteboardHeader-VNuz3NMt.js"}