{"version":3,"file":"SurfacePostProperties-41c4b787.js","sources":["../../../app/javascript/vuecomponents/SurfacePostProperties.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { captureException } from '@@/bits/error_tracker'\nimport { __ } from '@@/bits/intl'\nimport { getPostPropertyFormattedValue } from '@@/bits/post_properties'\nimport { useSurfacePostPropertiesStore } from '@@/pinia/surface_post_properties'\nimport type { Post, PostColor, PostCustomPropertyValue, WallCustomPostProperty } from '@@/types'\nimport SurfacePostPropertiesEmailFieldValue from '@@/vuecomponents/SurfacePostPropertiesEmailFieldValue.vue'\nimport SurfacePostPropertiesLinkButton from '@@/vuecomponents/SurfacePostPropertiesLinkButton.vue'\nimport SurfacePostPropertiesPhoneNumberFieldValue from '@@/vuecomponents/SurfacePostPropertiesPhoneNumberFieldValue.vue'\nimport SurfacePostPropertiesTextFieldValue from '@@/vuecomponents/SurfacePostPropertiesTextFieldValue.vue'\nimport SurfacePostPropertiesUrlFieldValue from '@@/vuecomponents/SurfacePostPropertiesUrlFieldValue.vue'\nimport SurfacePostPropertiesUserFieldValue from '@@/vuecomponents/SurfacePostPropertiesUserFieldValue.vue'\nimport { storeToRefs } from 'pinia'\nimport type { Ref, VNodeData } from 'vue'\nimport { computed, onMounted, ref } from 'vue'\n\nexport interface PostPropertyDisplayAttributes {\n  id: string\n  name: string\n  formattedValue: PostCustomPropertyValue\n  dataType?: WallCustomPostProperty['data_type']\n}\n\nexport type CustomPropertyTextRefs = Record<'customPropertyLabelRefs' | 'customPropertyValueRefs', Ref<HTMLElement[]>>\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps<{\n    source?: 'post' | 'slideshow' | 'expanded_view'\n    darkMode: boolean\n    locationName?: string\n    wallCustomPostProperties: WallCustomPostProperty[]\n    customPropertyValues: Post['custom_properties']\n    propertyLabelClass?: string\n    propertyValueClass?: string\n    linkButtonSize?: 24 | 32 | 40 | 56\n    postColor: PostColor\n    colorScheme: 'light' | 'dark'\n  }>(),\n  {\n    source: 'post',\n    locationName: undefined,\n    propertyLabelClass: 'text-body-extra-small',\n    propertyValueClass: 'text-body-small',\n    linkButtonSize: 24,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'dblclick', event: MouseEvent): void\n  (name: 'update:text-element-refs', event: CustomPropertyTextRefs)\n}>()\n\nconst { customLinkButtonProperty } = storeToRefs(useSurfacePostPropertiesStore())\n\n// Values used for displaying custom post property values\nconst customPostProperties = computed<PostPropertyDisplayAttributes[]>(() => {\n  const customPropertyValues = props.customPropertyValues\n  if (customPropertyValues == null) return []\n  return props.wallCustomPostProperties\n    .filter((property) => property.id != null)\n    .map((property) => {\n      return {\n        id: property.id!, // non-null assert: already filtered out cases where property.id is blank\n        name: property.name,\n        formattedValue: getPostPropertyFormattedValue({ property, value: customPropertyValues[property.id!] }),\n        dataType: property.data_type,\n      }\n    })\n    .filter(({ formattedValue }) => formattedValue !== '')\n})\n\n// Full list of property values: location property + custom properties\nconst postProperties = computed<PostPropertyDisplayAttributes[]>(() => {\n  const properties: PostPropertyDisplayAttributes[] = []\n  if (props.locationName) {\n    // TODO: display location as a clickable link, using bits/location#navigateToMap\n    properties.push({\n      id: 'post-property-location',\n      name: __('Location'),\n      formattedValue: props.locationName,\n    })\n  }\n\n  properties.push(...customPostProperties.value)\n  return properties\n})\n\nconst customPropertyLabelRefs: Ref<HTMLElement[]> = ref([])\nconst customPropertyValueRefs: Ref<HTMLElement[]> = ref([])\n\nconst addLabelRef: VNodeData['ref'] = (e): void => {\n  customPropertyLabelRefs.value.push(e as HTMLElement)\n}\n\nconst addValueRef: VNodeData['ref'] = (e): void => {\n  // ref can be an html element or a vue component\n  const ref = e instanceof Element ? e : e?.$el\n  if (ref != null) customPropertyValueRefs.value.push(ref as HTMLElement)\n}\n\n// Link button-related logic\nconst linkButtonPropertyValue = computed<string | undefined>(() => {\n  if (customLinkButtonProperty.value?.id == null || props.customPropertyValues == null) return undefined\n\n  const linkButtonUrl = props.customPropertyValues[customLinkButtonProperty.value.id] as string | undefined\n\n  if (linkButtonUrl == null || linkButtonUrl === '') return undefined\n\n  const parsedButtonUrl = (() => {\n    try {\n      return new URL(linkButtonUrl).href\n    } catch (_err) {\n      // First attempt failed, try adding 'https://' prefix\n      try {\n        return new URL(`https://${linkButtonUrl}`).href\n      } catch (err) {\n        captureException(err)\n        return undefined\n      }\n    }\n  })()\n\n  return parsedButtonUrl\n})\n\nonMounted(() => {\n  // For slideshow resizing logic\n  emit('update:text-element-refs', {\n    customPropertyLabelRefs,\n    customPropertyValueRefs,\n  })\n})\n</script>\n\n<template>\n  <dl class=\"flex flex-col gap-1 break-words whitespace-break-spaces\" @dblclick=\"$emit('dblclick', $event)\">\n    <div\n      v-for=\"prop in postProperties\"\n      :key=\"prop.id\"\n      :class=\"['flex flex-col py-1', prop.dataType === 'single_select' ? 'gap-1' : 'gap-0.5']\"\n    >\n      <dt\n        :ref=\"addLabelRef\"\n        :class=\"[\n          props.propertyLabelClass,\n          props.darkMode && 'text-light-text-200',\n          !props.darkMode && 'text-dark-text-200',\n        ]\"\n        data-testid=\"surfacePostPropertiesFieldName\"\n        v-text=\"prop.name\"\n      />\n      <SurfacePostPropertiesTextFieldValue\n        v-if=\"prop.dataType === 'text'\"\n        :ref=\"addValueRef\"\n        :post-property=\"prop\"\n        :dark-mode=\"darkMode\"\n        :property-value-class=\"propertyValueClass\"\n        data-testid=\"surfacePostPropertiesValue\"\n      />\n      <SurfacePostPropertiesEmailFieldValue\n        v-else-if=\"prop.dataType === 'email'\"\n        :ref=\"addValueRef\"\n        :post-property=\"prop\"\n        :dark-mode=\"darkMode\"\n        :property-value-class=\"propertyValueClass\"\n      />\n      <SurfacePostPropertiesUrlFieldValue\n        v-else-if=\"prop.dataType === 'url'\"\n        :ref=\"addValueRef\"\n        :post-property=\"prop\"\n        :dark-mode=\"darkMode\"\n        :property-value-class=\"propertyValueClass\"\n      />\n      <SurfacePostPropertiesPhoneNumberFieldValue\n        v-else-if=\"prop.dataType === 'phone_number'\"\n        :ref=\"addValueRef\"\n        :post-property=\"prop\"\n        :dark-mode=\"darkMode\"\n        :property-value-class=\"propertyValueClass\"\n      />\n      <SurfacePostPropertiesUserFieldValue\n        v-else-if=\"prop.dataType === 'user'\"\n        :ref=\"addValueRef\"\n        :post-property=\"prop\"\n        :dark-mode=\"darkMode\"\n        :property-value-class=\"propertyValueClass\"\n      />\n      <dd\n        v-else\n        :ref=\"addValueRef\"\n        :class=\"[\n          props.propertyValueClass,\n          props.darkMode && 'text-light-text-100',\n          !props.darkMode && 'text-dark-text-100',\n          prop.dataType === 'single_select' && [\n            'rounded-lg px-2 py-0.5 w-fit break-word-anywhere',\n            props.source === 'post' && {\n              'bg-oceanic-200': postColor === 'blue' && colorScheme === 'light',\n              'bg-oceanic-800': postColor === 'blue' && colorScheme === 'dark',\n              'bg-park-200': postColor === 'green' && colorScheme === 'light',\n              'bg-park-800': postColor === 'green' && colorScheme === 'dark',\n              'bg-canary-200 ': postColor === 'orange' && colorScheme === 'light',\n              'bg-tangerine-800': postColor === 'orange' && colorScheme === 'dark',\n              'bg-grape-200': postColor === 'purple' && colorScheme === 'light',\n              'bg-grape-800': postColor === 'purple' && colorScheme === 'dark',\n              'bg-scarlet-200 ': postColor === 'red' && colorScheme === 'light',\n              'bg-scarlet-800': postColor === 'red' && colorScheme === 'dark',\n              'bg-grey-100': postColor === null && colorScheme === 'light',\n              'bg-grey-800': postColor === null && colorScheme === 'dark',\n            },\n            props.source === 'expanded_view' && 'bg-grey-100  dark:bg-grey-800',\n            props.source === 'slideshow' && [darkMode ? 'bg-button-dark' : 'bg-button-light'],\n          ],\n        ]\"\n        data-testid=\"surfacePostPropertiesValue\"\n        v-text=\"prop.formattedValue\"\n      />\n    </div>\n    <div v-if=\"customLinkButtonProperty != null && linkButtonPropertyValue != null\" class=\"py-1 flex justify-start\">\n      <dd class=\"min-w-0\">\n        <SurfacePostPropertiesLinkButton\n          :name=\"customLinkButtonProperty.name\"\n          :url=\"linkButtonPropertyValue\"\n          :size=\"linkButtonSize\"\n          :dark-mode=\"darkMode\"\n          data-testid=\"surfacePostPropertiesLinkButton\"\n        />\n      </dd>\n    </div>\n  </dl>\n</template>\n"],"names":["__default__","customLinkButtonProperty","storeToRefs","useSurfacePostPropertiesStore","customPostProperties","computed","customPropertyValues","props","wallCustomPostProperties","filter","property","id","map","name","formattedValue","getPostPropertyFormattedValue","value","dataType","data_type","postProperties","properties","locationName","push","__","customPropertyLabelRefs","ref","customPropertyValueRefs","addLabelRef","e","addValueRef","Element","$el","linkButtonPropertyValue","linkButtonUrl","URL","href","err","captureException","onMounted","emit"],"mappings":"m0GAwBA,MAAAA,EAAe,CAAA,maA+BT,CAAEC,yBAAAA,CAAyB,EAAIC,EAAYC,GAA+B,EAG1EC,EAAuBC,EAA0C,IAAM,CAC3E,MAAMC,EAAuBC,EAAMD,qBACnC,OAAIA,GAAwB,KAAa,GAClCC,EAAMC,yBACVC,OAAQC,GAAaA,EAASC,IAAM,IAAI,EACxCC,IAAKF,IACG,CACLC,GAAID,EAASC,GACbE,KAAMH,EAASG,KACfC,eAAgBC,EAA8B,CAAEL,SAAAA,EAAUM,MAAOV,EAAqBI,EAASC,EAAG,CAAE,CAAC,EACrGM,SAAUP,EAASQ,WAEtB,EACAT,OAAO,CAAC,CAAEK,eAAAA,CAAe,IAAMA,IAAmB,EAAE,CACzD,CAAC,EAGKK,EAAiBd,EAA0C,IAAM,CACrE,MAAMe,EAA8C,CAAA,EACpD,OAAIb,EAAMc,cAERD,EAAWE,KAAK,CACdX,GAAI,yBACJE,KAAMU,EAAG,UAAU,EACnBT,eAAgBP,EAAMc,YACxB,CAAC,EAGQD,EAAAE,KAAK,GAAGlB,EAAqBY,KAAK,EACtCI,CACT,CAAC,EAEKI,EAA8CC,EAAI,CAAA,CAAE,EACpDC,EAA8CD,EAAI,CAAA,CAAE,EAEpDE,EAAiCC,GAAY,CACzBJ,EAAAR,MAAMM,KAAKM,CAAgB,GAG/CC,EAAiCD,GAAY,CAEjD,MAAMH,EAAMG,aAAaE,QAAUF,EAAIA,GAAAA,YAAAA,EAAGG,IACtCN,GAAO,MAA8BC,EAAAV,MAAMM,KAAKG,CAAkB,GAIlEO,EAA0B3B,EAA6B,IAAM,OACjE,KAAIJ,EAAAA,EAAyBe,QAAzBf,YAAAA,EAAgCU,KAAM,MAAQJ,EAAMD,sBAAwB,KAAa,OAE7F,MAAM2B,EAAgB1B,EAAMD,qBAAqBL,EAAyBe,MAAML,EAAE,EAE9E,OAAAsB,GAAiB,MAAQA,IAAkB,GAAW,QAEjC,IAAM,CACzB,GAAA,CACK,OAAA,IAAIC,IAAID,CAAa,EAAEE,UACjB,CAET,GAAA,CACF,OAAO,IAAID,IAAI,WAAWD,CAAa,EAAE,EAAEE,WACpCC,EAAK,CACZC,EAAiBD,CAAG,EACb,MACT,CACF,CACF,IAGF,CAAC,EAEDE,OAAAA,EAAU,IAAM,CAEdC,EAAK,2BAA4B,CAC/Bf,wBAAAA,EACAE,wBAAAA,CACF,CAAC,CACH,CAAC"}