{"version":3,"mappings":"y9CAgBMA,EAAiBC,EAAqB,UAAM,OAAO,+BAAsC,2UAAC,EAoGnFC,EAAA,CACXC,kBACF,CAAC,EAED,MAAMC,EAASC,EAAS,IAAMC,EAAMC,SAAW,MAAM,EAC/CC,EAAWH,EAAS,IAAMC,EAAMC,SAAW,QAAQ,EACnDE,EAAUJ,EAAS,IAAMC,EAAMC,SAAW,OAAO,EACjDG,EAAWL,EAAS,IAAMC,EAAMC,SAAW,QAAQ,EACnDI,EAAQN,EAAS,IAAMC,EAAMC,SAAW,KAAK,EAC7CK,EAAaP,EAAS,IAAMC,EAAMC,SAAW,YAAcD,EAAMC,SAAW,aAAa,EACzFM,EAAUR,EAAS,IAAMC,EAAMC,SAAW,OAAO,EACjDO,EAAcT,EAAS,IAAMU,EAAyBJ,EAAMK,MAAQ,EAAIV,EAAMW,MAAM,CAAC,EAErFC,EAAiBb,EAAS,KACzBD,EAAOY,OAASP,EAAQO,QAAUV,EAAMa,MAAMC,OAASC,EACnDf,EAAMa,MAAMG,MAAM,EAAGD,CAAwB,EAAI,IAEnDf,EAAMa,KACd,EAGKI,EAAgBlB,EAAS,IAAOC,EAAMkB,SAAWlB,EAAMmB,cAAgBnB,EAAMoB,SAAW,EAAM,EAC9FC,EAAaC,IAEnB,SAASzB,GAAyB,QAChCwB,IAAWX,QAAXW,QAAkBE,QACpB,CAGA,MAAMC,EAAoBzB,EAAS,IAAMkB,EAAcP,OAASW,EAAWX,KAAK,EAEhFe,EACED,EACA,MAAOE,GAAiB,CAClBA,IACFC,EAAajB,MAAQV,EAAMa,MAC3B,MAAMe,EAAS,EACE/B,IAErB,EACA,CAAEgC,UAAW,EAAK,CACpB,EAEM,MAAAF,EAAeL,EAAItB,EAAMa,KAAK,EAC9BiB,EAAgBR,EAAItB,EAAMa,KAAK,EAErCY,EACE,IAAMzB,EAAMa,MACXkB,GAAa,CACZD,EAAcpB,MAAQqB,EACtBJ,EAAajB,MAAQqB,CACvB,CACF,EAEM,MAAAC,EAAsBjC,EAAS,IAAM,CACnC,MAAAkC,EAAeN,EAAajB,MAAMwB,KAAK,EAC7C,MAAID,IAAanB,OAASqB,GAA4BF,EAAanB,OAASC,EAK9E,CAAC,EAED,SAASqB,GAAyB,CAC5BpC,EAAMkB,UACJlB,EAAMmB,cACRkB,EAAK,eAAe,EAEpBA,EAAK,cAAc,EAGzB,CAEA,SAASC,GAAsB,CAC7BR,EAAcpB,MAAQiB,EAAajB,MAC9B2B,EAAA,iBAAkBV,EAAajB,KAAK,CAC3C,CAEA,SAAS6B,GAAsB,CAC7BZ,EAAajB,MAAQoB,EAAcpB,MACnC2B,EAAK,gBAAgB,CACvB,CAEA,MAAMG,EAAMlB,IACNmB,EAAkBnB,EAAI,CAAC,EAE7B,SAASoB,GAA8B,SAOrCD,EAAgB/B,SAAS8B,OAAI9B,QAAJ8B,cAAWG,0BAAXH,cAAoCI,SAAU,GAAKC,KAAKC,IAAK,GAAKD,KAAKE,GAAM,GAAG,EAAI,CAC/G,CAEA,SAASC,EAAoCC,EAAqB,CAK3DT,EAAI9B,QACJ8B,EAAI9B,MAAMwC,SAASD,EAAEE,aAA4B,GAC/Cd,EAAA,iBAAkBV,EAAajB,KAAK,EAE7C,CAEA0C,SAAkBZ,EAAK,IAAM,CACLE,IACtBL,EAAK,QAAQ,CACf,CAAC,EAEDgB,EAAU,IAAM,CACQX,GACxB,CAAC","names":["MultilineInput","defineAsyncComponent","expose","selectTitleInput","isGrid","computed","props","format","isMatrix","isShelf","isStream","isMap","isTimeline","isTable","twFontClass","tailwindSurfaceFontClass","value","fontId","truncatedTitle","title","length","MAX_SECTION_TITLE_LENGTH","slice","isBeingEdited","canEdit","canEditInline","editMode","titleInput","ref","select","shouldSelectInput","watch","shouldSelect","currentTitle","nextTick","immediate","previousTitle","newTitle","isCurrentTitleValid","trimmedTitle","trim","MIN_SECTION_TITLE_LENGTH","tryEditingInline","emit","finishEditing","cancelEditing","$el","skewedEdgeWidth","updateSkewedEdgeWidth","getBoundingClientRect","height","Math","tan","PI","finishEditingIfFocusTargetIsOutside","e","contains","relatedTarget","useResizeObserver","onMounted"],"sources":["../../../app/javascript/vuecomponents/SurfaceSectionTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tailwindSurfaceFontClass } from '@@/bits/font'\nimport { __ } from '@@/bits/intl'\nimport { MAX_SECTION_TITLE_LENGTH, MIN_SECTION_TITLE_LENGTH } from '@@/bits/numbers'\nimport { defineAsyncComponent } from '@@/bits/vue'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport type { WallViz } from '@@/types'\nimport { useResizeObserver } from '@@/vuecomposables/resize_observer'\nimport type { PropType, Ref } from 'vue'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nconst MultilineInput = defineAsyncComponent(() => import('@@/vuecomponents/multiline_input.vue'))\n\nconst props = defineProps({\n  /**\n   * Background color for the component.\n   * Default is Light UI 400 / Dark UI 400.\n   */\n  backgroundColor: {\n    type: String,\n    default: () => undefined,\n  },\n  /**\n   * Whether the current user can edit the title or not.\n   */\n  canEdit: {\n    type: Boolean,\n    required: true,\n  },\n  /**\n   * Whether the title can be edited inline or not.\n   */\n  canEditInline: {\n    type: Boolean,\n    required: true,\n  },\n  /**\n   * Dark mode.\n   */\n  darkMode: {\n    type: Boolean,\n    required: true,\n  },\n  /**\n   * Direction.\n   */\n  dir: {\n    type: String as PropType<'ltr' | 'rtl' | 'auto'>,\n    default: 'auto',\n  },\n  /**\n   * Edit mode.\n   */\n  editMode: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * Whether to show More button (in Wall format).\n   */\n  xMoreButton: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * Surface font variant.\n   */\n  fontId: {\n    type: Number as PropType<1 | 2 | 3 | 4>,\n    required: true,\n  },\n  /**\n   * Wall format.\n   */\n  format: {\n    type: String as PropType<WallViz>,\n    required: true,\n    validator(value: string): boolean {\n      // We only have sections in these formats\n      return ['grid', 'matrix', 'shelf', 'stream', 'map', 'timeline', 'timeline_v2', 'table'].includes(value)\n    },\n  },\n  /**\n   * Section title.\n   */\n  title: {\n    type: String,\n    required: true,\n  },\n  /**\n   * Section id\n   */\n  sectionId: {\n    type: Number,\n    required: true,\n  },\n  id: {\n    type: String,\n    default: () => undefined,\n  },\n})\n\nconst emit = defineEmits<{\n  (name: 'open-actions'): void\n  (name: 'open-actions-at-coordinates', e: MouseEvent): void\n  (name: 'start-editing'): void\n  (name: 'finish-editing', value: string): void\n  (name: 'cancel-editing'): void\n  (name: 'resize'): void\n}>()\n\ndefineExpose({\n  selectTitleInput,\n})\n\nconst isGrid = computed(() => props.format === 'grid')\nconst isMatrix = computed(() => props.format === 'matrix')\nconst isShelf = computed(() => props.format === 'shelf')\nconst isStream = computed(() => props.format === 'stream')\nconst isMap = computed(() => props.format === 'map')\nconst isTimeline = computed(() => props.format === 'timeline' || props.format === 'timeline_v2')\nconst isTable = computed(() => props.format === 'table')\nconst twFontClass = computed(() => tailwindSurfaceFontClass(isMap.value ? 1 : props.fontId))\n\nconst truncatedTitle = computed(() => {\n  if ((isGrid.value || isShelf.value) && props.title.length > MAX_SECTION_TITLE_LENGTH) {\n    return props.title.slice(0, MAX_SECTION_TITLE_LENGTH) + '…'\n  }\n  return props.title\n})\n\n// Only open in edit mode if user can edit inline\nconst isBeingEdited = computed(() => (props.canEdit && props.canEditInline ? props.editMode : false))\nconst titleInput = ref<InstanceType<typeof MultilineInput>>()\n\nfunction selectTitleInput(): void {\n  titleInput.value?.select()\n}\n\n// Select input if in edit mode\nconst shouldSelectInput = computed(() => isBeingEdited.value && titleInput.value)\n\nwatch(\n  shouldSelectInput,\n  async (shouldSelect) => {\n    if (shouldSelect) {\n      currentTitle.value = props.title // Set title input to latest title\n      await nextTick()\n      selectTitleInput()\n    }\n  },\n  { immediate: true },\n)\n\nconst currentTitle = ref(props.title)\nconst previousTitle = ref(props.title)\n\nwatch(\n  () => props.title,\n  (newTitle) => {\n    previousTitle.value = newTitle\n    currentTitle.value = newTitle\n  },\n)\n\nconst isCurrentTitleValid = computed(() => {\n  const trimmedTitle = currentTitle.value.trim()\n  if (trimmedTitle.length < MIN_SECTION_TITLE_LENGTH || trimmedTitle.length > MAX_SECTION_TITLE_LENGTH) {\n    return false\n  } else {\n    return true\n  }\n})\n\nfunction tryEditingInline(): void {\n  if (props.canEdit) {\n    if (props.canEditInline) {\n      emit('start-editing')\n    } else {\n      emit('open-actions')\n    }\n  }\n}\n\nfunction finishEditing(): void {\n  previousTitle.value = currentTitle.value\n  emit('finish-editing', currentTitle.value)\n}\n\nfunction cancelEditing(): void {\n  currentTitle.value = previousTitle.value\n  emit('cancel-editing')\n}\n\nconst $el = ref<HTMLElement>() as Ref<HTMLElement>\nconst skewedEdgeWidth = ref(0)\n\nfunction updateSkewedEdgeWidth(): void {\n  // What is this math sorcery?\n  //\n  // The requirement for the skewed angle is 10 degrees.\n  // We can get the opposite side of the triangle by using the tangent function.\n  // The additional 5 is the border radius of the skewed edge, as the edge is shifted by it.\n  // Visual explanation: TBA\n  skewedEdgeWidth.value = ($el.value?.getBoundingClientRect()?.height ?? 0) * Math.tan((10 * Math.PI) / 180) + 5\n}\n\nfunction finishEditingIfFocusTargetIsOutside(e: FocusEvent): void {\n  // When MultilineInput loses focus, we don't want to emit `finish-editing` too early\n  // because it may be a Tab press to focus on the Done button. To prevent this, we\n  // check `e.relatedTarget` to see if it's an element inside the section title or not.\n  // If it's not, then we can safely emit the event.\n  if (!$el.value) return\n  if (!$el.value.contains(e.relatedTarget as Node | null)) {\n    emit('finish-editing', currentTitle.value)\n  }\n}\n\nuseResizeObserver($el, () => {\n  updateSkewedEdgeWidth()\n  emit('resize')\n})\n\nonMounted(() => {\n  updateSkewedEdgeWidth()\n})\n</script>\n\n<template>\n  <div\n    :id=\"`section-title-${sectionId}`\"\n    ref=\"$el\"\n    :dir=\"dir\"\n    :class=\"['relative', 'flex', 'flex-row', isMap && 'overflow-hidden', 'select-none']\"\n    @contextmenu.prevent=\"$emit('open-actions-at-coordinates', $event)\"\n  >\n    <!-- MAIN CONTENT -->\n    <div\n      :class=\"[\n        // Size/shape\n        {\n          grow: isGrid || isShelf,\n        },\n        'flex',\n        'items-end',\n        isMap && 'overflow-hidden',\n        {\n          'rounded-s-none tablet-portrait:rounded-s-lg': isStream || isMatrix,\n          'rounded-ss tablet-landscape:rounded-ss-lg': isMap,\n          'rounded-s-lg': isGrid || isShelf,\n        },\n        'py-0.75',\n        'ps-0.75',\n        'pe-0',\n\n        // Default background color\n        !backgroundColor && {\n          'bg-light-ui-400': darkMode === false,\n          'bg-dark-ui-400': darkMode === true,\n        },\n\n        // Text\n        twFontClass,\n        {\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n        },\n      ]\"\n      :style=\"{ backgroundColor: backgroundColor }\"\n    >\n      <!-- VIEW MODE -->\n      <div\n        v-if=\"!isBeingEdited\"\n        :class=\"[\n          'w-full',\n          {\n            // If MORE BUTTON is showing, give it space\n            'me-4': xMoreButton && (isGrid || isShelf) && !isBeingEdited,\n          },\n          canEdit && {\n            'hhover:bg-light-text-300': darkMode === false,\n            'hhover:bg-dark-text-300': darkMode === true,\n          },\n          {\n            'border-2': isStream || isMatrix || isTimeline || isTable || isGrid || isShelf,\n            'border-[1.5px]': isMap,\n          },\n          'rounded-md',\n          'box-border',\n          'border-solid',\n          'border-transparent',\n          'px-1.5',\n          {\n            'py-0.5': isGrid || isShelf || isStream || isTimeline || isTable || isMatrix,\n            'py-0': isMap,\n          },\n        ]\"\n        @click=\"tryEditingInline\"\n        @keydown.enter=\"tryEditingInline\"\n      >\n        <h2\n          v-if=\"!isBeingEdited\"\n          :id=\"id\"\n          dir=\"auto\"\n          :class=\"[\n            {\n              'text-heading-3': isStream || isMatrix || isTimeline || isTable || isGrid || isShelf,\n              'text-body-extra-small': isMap,\n            },\n            'font-semibold',\n            'break-word-anywhere',\n            'whitespace-break-spaces',\n            isMap && 'truncate',\n          ]\"\n          data-testid=\"sectionTitleText\"\n          v-text=\"truncatedTitle\"\n        />\n      </div>\n\n      <!-- EDIT MODE -->\n      <!-- Text input -->\n      <template v-if=\"isBeingEdited\">\n        <div\n          :class=\"[\n            'flex',\n            {\n              grow: isGrid || isShelf,\n            },\n            'items-center',\n            {\n              'border-2': isStream || isMatrix || isTimeline || isTable || isGrid || isShelf,\n              'border-[1.5px]': isMap,\n            },\n            'rounded-md',\n            'box-border',\n            'border-solid',\n            isCurrentTitleValid && {\n              'border-grape-500': darkMode === false,\n              'border-canary-500': darkMode === true,\n            },\n            !isCurrentTitleValid && 'border-danger-100',\n            'px-1.5',\n            {\n              'py-0.5': isGrid || isShelf || isStream || isTimeline || isTable || isMatrix,\n              'py-0': isMap,\n            },\n            {\n              'bg-light-ui-100': darkMode === false,\n              'bg-dark-ui-100': darkMode === true,\n            },\n          ]\"\n        >\n          <MultilineInput\n            ref=\"titleInput\"\n            v-model=\"currentTitle\"\n            :dark-mode=\"darkMode\"\n            :class=\"[\n              {\n                grow: isGrid || isShelf,\n              },\n              'm-0',\n              {\n                // Since we truncate the title for Grid (Shelf), we want to limit the height\n                // of the input as well. This number here will ensure the height doesn't\n                // jump when going from view mode to edit mode.\n                'max-h-[208px]': isGrid || isShelf,\n              },\n              {\n                'text-heading-3': isStream || isMatrix || isTimeline || isTable || isGrid || isShelf,\n                'text-body-extra-small': isMap,\n              },\n              'font-semibold',\n              twFontClass,\n            ]\"\n            aria-required\n            :aria-label=\"__('Section title')\"\n            :cols=\"\n              // Use cols to dynamically size the textarea to fit its contents.\n              // Use currentTitle.length + 1 to accommodate characters that are wider than average.\n              isStream || isMatrix || isTimeline || isTable || isMap ? currentTitle.length + 1 : undefined\n            \"\n            data-testid=\"surfaceSectionRenameMultilineInput\"\n            @blur=\"finishEditingIfFocusTargetIsOutside\"\n            @escape=\"cancelEditing\"\n            @enter=\"finishEditing\"\n            @paste.stop\n          />\n        </div>\n\n        <!-- Done button -->\n        <!-- Not show on Map -->\n        <OzPlainButton\n          v-if=\"!isMap\"\n          :class=\"['ms-1', 'shrink-0', 'py-1.5']\"\n          :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n          :size-preset=\"OzPlainButtonSizePreset.H32px\"\n          :dark-mode=\"darkMode\"\n          :text=\"__('Done')\"\n          @blur=\"finishEditingIfFocusTargetIsOutside\"\n          @click.stop=\"finishEditing\"\n        />\n      </template>\n    </div>\n\n    <!-- SKEWED EDGE -->\n    <div\n      :class=\"[\n        // Put the edge underneath so it doesn't cover the main content\n        'z-underneath',\n\n        'flex-none',\n        'w-3',\n        'rounded-[5px]',\n        {\n          'rounded-s-none': isStream || isMatrix || isTimeline || isTable || isGrid || isShelf,\n          'rounded-s-none rounded-ee-none': isMap,\n        },\n\n        // Default background color\n        !backgroundColor && {\n          'bg-light-ui-400': darkMode === false,\n          'bg-dark-ui-400': darkMode === true,\n        },\n\n        {\n          'origin-bottom-left': dir === 'ltr',\n          'origin-bottom-right': dir === 'rtl',\n          'origin-bottom-left rtl:origin-bottom-right': dir === 'auto',\n        },\n        {\n          'skew-x-[10deg]': dir === 'ltr',\n          'skew-x-[-10deg]': dir === 'rtl',\n          'skew-x-[10deg] rtl:skew-x-[-10deg]': dir === 'auto',\n        },\n      ]\"\n      :style=\"{\n        backgroundColor: backgroundColor,\n        width: `${skewedEdgeWidth}px`,\n        willChange: 'transform',\n      }\"\n    />\n\n    <!-- MORE BUTTON -->\n    <!-- Only show on Wall/Shelf and when not editing -->\n    <OzBaseButton\n      v-if=\"xMoreButton && (isGrid || isShelf) && !isBeingEdited\"\n      :id=\"`section-action-menu-button-${sectionId}`\"\n      :class=\"[\n        // Position\n        'absolute',\n        'top-[3.25px]',\n\n        // Size/shape\n        'flex',\n        'items-center',\n        'justify-center',\n        'w-6 h-6.5',\n        {\n          'rotate-[-10deg]': dir === 'ltr',\n          'rotate-[10deg]': dir === 'rtl',\n          'rotate-[-10deg] rtl:rotate-[10deg]': dir === 'auto',\n        },\n\n        // No background\n        'bg-transparent',\n\n        // Focus ring\n        'focus-visible:outline-none',\n        'rounded-lg',\n        'focus-visible:ring-2',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n        },\n\n        // Icon style\n        'leading-none',\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n        },\n        {\n          'hover-hover:hover:text-dark-text-100': darkMode === false,\n          'hover-hover:hover:text-light-text-100': darkMode === true,\n        },\n        {\n          'active:text-grape-500': darkMode === false,\n          'active:text-canary-500': darkMode === true,\n        },\n      ]\"\n      :style=\"{\n        // The button is actually positioned relative to the skewed edge\n        // but we can't make it a child of the skewed edge `div` because\n        // of `z-underneath`.\n        // 5 is the border radius of the skewed edge.\n        [dir === 'rtl' ? 'left' : 'right']: `${skewedEdgeWidth - 5}px`,\n      }\"\n      :data-testid=\"`${title}SectionTitleMoreButton`\"\n      :aria-label=\"__('Open section actions menu')\"\n      :title=\"__('Section actions')\"\n      @click.stop=\"$emit('open-actions-at-coordinates', $event)\"\n      @keydown.enter.stop.prevent=\"$emit('open-actions')\"\n      @keydown.space.stop.prevent=\"$emit('open-actions')\"\n    >\n      <OzIcon name=\"more_vertical\" :size=\"16\" />\n    </OzBaseButton>\n  </div>\n</template>\n"],"file":"assets/SurfaceSectionTitle-c40d5e94.js"}