{"version":3,"file":"SurfacePostProperties-mgMzN5qx.js","sources":["../../../app/javascript/vuecomponents/SurfacePostPropertiesLinkButton.vue","../../../app/javascript/vuecomponents/SurfacePostPropertiesTextFieldValue.vue","../../../app/javascript/vuecomponents/SurfacePostProperties.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  name: string\n  url: string\n  darkMode: boolean\n  size: 24 | 32 | 40 | 56\n}>()\n\nconst linkButtonSizePreset = computed(() => {\n  switch (props.size) {\n    case 24:\n      return OzContainedButtonSizePreset.H24px\n    case 32:\n      return OzContainedButtonSizePreset.H32px\n    case 40:\n      return OzContainedButtonSizePreset.H40px\n    case 56:\n      return OzContainedButtonSizePreset.H56px\n    default:\n      return OzContainedButtonSizePreset.H24px\n  }\n})\n</script>\n\n<template>\n  <OzContainedButton\n    data-bridged-link=\"external\"\n    target=\"_blank\"\n    :href=\"url\"\n    :dark-mode=\"darkMode\"\n    :size-preset=\"linkButtonSizePreset\"\n    :color-scheme=\"OzContainedButtonColorScheme.Bare\"\n    :class=\"[\n      darkMode\n        ? [\n            'bg-button-dark hhover:bg-button-hover-dark',\n            'hactive:bg-canary-500 hactive:text-dark-text-100',\n            'text-light-text-200',\n          ]\n        : [\n            'bg-button-light hhover:bg-button-hover-light',\n            'hactive:bg-grape-500 hactive:text-light-text-100',\n            'text-dark-text-200',\n          ],\n    ]\"\n    :text=\"name\"\n  >\n  </OzContainedButton>\n</template>\n","<script setup lang=\"ts\">\nimport type { PostPropertyDisplayAttributes } from '@@/vuecomponents/SurfacePostProperties.vue'\nimport { processPostBody } from '@@/vuecomposables/process_post_or_comment_body'\nimport { onMounted, ref, watch } from 'vue'\nconst props = withDefaults(\n  defineProps<{\n    darkMode: boolean\n    postProperty: PostPropertyDisplayAttributes\n    propertyValueClass?: string\n  }>(),\n  {\n    propertyValueClass: 'text-body-small',\n  },\n)\n\nconst textFieldValue = ref(props.postProperty.formattedValue)\nconst textFieldValueRef = ref<HTMLElement | null>(null)\nconst processTextFieldValue = async (value: string): Promise<void> => {\n  if (!textFieldValueRef.value) return\n  const string = await processPostBody(value, textFieldValueRef.value)\n  textFieldValue.value = string\n}\n\nonMounted(async () => {\n  await processTextFieldValue(props.postProperty.formattedValue)\n})\n\nwatch(\n  () => props.postProperty.formattedValue,\n  async (newValue) => {\n    textFieldValue.value = newValue\n    await processTextFieldValue(props.postProperty.formattedValue)\n  },\n)\n</script>\n\n<template>\n  <dd\n    ref=\"textFieldValueRef\"\n    :class=\"[\n      'surface-post-property-text-field-value',\n      propertyValueClass,\n      darkMode && 'text-light-text-100',\n      !darkMode && 'text-dark-text-100',\n    ]\"\n    v-html=\"textFieldValue\"\n  />\n</template>\n<style lang=\"postcss\">\n.surface-post-property-text-field-value a {\n  @apply underline;\n  @apply text-current;\n  text-underline-position: from-font;\n  text-decoration-thickness: from-font;\n}\n</style>\n","<script lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { getPostPropertyFormattedValue } from '@@/bits/post_properties'\nimport { useSurfacePostPropertiesStore } from '@@/pinia/surface_post_properties'\nimport type { Post, PostColor, WallCustomPostProperty } from '@@/types'\nimport SurfacePostPropertiesLinkButton from '@@/vuecomponents/SurfacePostPropertiesLinkButton.vue'\nimport SurfacePostPropertiesTextFieldValue from '@@/vuecomponents/SurfacePostPropertiesTextFieldValue.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: string\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  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) return undefined\n\n  const parsedButtonUrl = (() => {\n    try {\n      return new URL(linkButtonUrl).href\n    } catch (_err) {\n      return new URL(`https://${linkButtonUrl}`).href\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 v-for=\"prop in postProperties\" :key=\"prop.id\" class=\"flex flex-col gap-0.5 py-1\">\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        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      />\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        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        />\n      </dd>\n    </div>\n  </dl>\n</template>\n"],"names":["linkButtonSizePreset","computed","props","size","OzContainedButtonSizePreset","H24px","H32px","H40px","H56px","textFieldValue","ref","postProperty","formattedValue","textFieldValueRef","processTextFieldValue","value","string","processPostBody","onMounted","watch","newValue","__default__","customLinkButtonProperty","storeToRefs","useSurfacePostPropertiesStore","customPostProperties","customPropertyValues","wallCustomPostProperties","filter","property","id","map","name","getPostPropertyFormattedValue","dataType","data_type","postProperties","properties","locationName","push","__","customPropertyLabelRefs","customPropertyValueRefs","addLabelRef","e","addValueRef","Element","$el","linkButtonPropertyValue","linkButtonUrl","URL","href","emit"],"mappings":"q5HAcMA,EAAuBC,EAAS,IAAM,CAC1C,OAAQC,EAAMC,KAAM,CAClB,IAAK,IACH,OAAOC,EAA4BC,MACrC,IAAK,IACH,OAAOD,EAA4BE,MACrC,IAAK,IACH,OAAOF,EAA4BG,MACrC,IAAK,IACH,OAAOH,EAA4BI,MACrC,QACE,OAAOJ,EAA4BC,KACvC,CACF,CAAC,81BCZKI,EAAiBC,EAAIR,EAAMS,aAAaC,cAAc,EACtDC,EAAoBH,EAAwB,IAAI,EAChDI,EAAwB,MAAOC,GAAiC,CAChE,GAAA,CAACF,EAAkBE,MAAO,OAC9B,MAAMC,EAAS,MAAMC,EAAgBF,EAAOF,EAAkBE,KAAK,EACnEN,EAAeM,MAAQC,GAGzBE,OAAAA,EAAU,SAAY,CACd,MAAAJ,EAAsBZ,EAAMS,aAAaC,cAAc,CAC/D,CAAC,EAEDO,EACE,IAAMjB,EAAMS,aAAaC,eACzB,MAAOQ,GAAa,CAClBX,EAAeM,MAAQK,EACjB,MAAAN,EAAsBZ,EAAMS,aAAaC,cAAc,CAC/D,CACF,maCdAS,EAAe,CAAA,maA+BT,CAAEC,yBAAAA,CAAyB,EAAIC,EAAYC,GAA+B,EAG1EC,EAAuBxB,EAA0C,IAAM,CAC3E,MAAMyB,EAAuBxB,EAAMwB,qBAC/B,OAAAA,GAAwB,KAAa,GAClCxB,EAAMyB,yBACVC,OAAQC,GAAaA,EAASC,IAAM,IAAI,EACxCC,IAAKF,IACG,CACLC,GAAID,EAASC,GACbE,KAAMH,EAASG,KACfpB,eAAgBqB,EAA8B,CAAEJ,SAAAA,EAAUd,MAAOW,EAAqBG,EAASC,EAAG,CAAE,CAAC,EACrGI,SAAUL,EAASM,WAEtB,EACAP,OAAO,CAAC,CAAEhB,eAAAA,CAAe,IAAMA,IAAmB,EAAE,CACzD,CAAC,EAGKwB,EAAiBnC,EAA0C,IAAM,CACrE,MAAMoC,EAA8C,CAAA,EACpD,OAAInC,EAAMoC,cAERD,EAAWE,KAAK,CACdT,GAAI,yBACJE,KAAMQ,EAAG,UAAU,EACnB5B,eAAgBV,EAAMoC,YACxB,CAAC,EAEQD,EAAAE,KAAK,GAAGd,EAAqBV,KAAK,EACtCsB,CACT,CAAC,EAEKI,EAA8C/B,EAAI,CAAA,CAAE,EACpDgC,EAA8ChC,EAAI,CAAA,CAAE,EAEpDiC,EAAiCC,GAAY,CACzBH,EAAA1B,MAAMwB,KAAKK,CAAgB,GAG/CC,EAAiCD,GAAY,CAEjD,MAAMlC,EAAMkC,aAAaE,QAAUF,EAAIA,GAAAA,YAAAA,EAAGG,IACtCrC,GAAO,MAA8BgC,EAAA3B,MAAMwB,KAAK7B,CAAkB,GAIlEsC,EAA0B/C,EAA6B,IAAM,OACjE,KAAIqB,EAAAA,EAAyBP,QAAzBO,YAAAA,EAAgCQ,KAAM,MAAQ5B,EAAMwB,sBAAwB,KAAa,OAE7F,MAAMuB,EAAgB/C,EAAMwB,qBAAqBJ,EAAyBP,MAAMe,EAAE,EAE9E,OAAAmB,GAAiB,KAAa,QAET,IAAM,CACzB,GAAA,CACK,OAAA,IAAIC,IAAID,CAAa,EAAEE,UACjB,CACb,OAAO,IAAID,IAAI,WAAWD,CAAa,EAAE,EAAEE,IAC7C,CACF,IAGF,CAAC,EAEDjC,OAAAA,EAAU,IAAM,CAEdkC,EAAK,2BAA4B,CAC/BX,wBAAAA,EACAC,wBAAAA,CACF,CAAC,CACH,CAAC"}