{"version":3,"file":"ContentBlockTable.17c57b35.js","sources":["../../../../components/ContentBlock/ContentBlockTable/ContentBlockTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import {\n    ContentBlockTableData,\n    ContentBlockTypeId,\n  } from '~/model/ContentBlockData/ContentBlockData'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import useBem from '~/composables/Bem/Bem'\n  import {\n    TableCellData,\n    TableColumnData,\n    TableRowData,\n  } from '~/model/ContentBlockTable/ContentBlockTable'\n  import useMarkdown from '~/composables/Markdown/Markdown'\n  import useContentBlockAlign from '~/composables/ContentBlockAlign/ContentBlockAlign'\n  import { ContentBlockTableFacet } from '~/components/ContentBlock/ContentBlockTable/ContentBlockTableFacet'\n\n  interface Props extends UseBemProps, ContentBlockTableData {\n    type: ContentBlockTypeId\n    facets?: Array<string>\n    title?: string\n    columnTitleList?: Array<TableColumnData>\n    rowContentList: Array<TableRowData>\n    fixedColWidth?: boolean\n  }\n\n  const SAME_VALUE_SIGN = `\"`\n\n  const props = withDefaults(defineProps<Props>(), {\n    facets: () => [],\n    title: '',\n    columnTitleList: () => [],\n    fixedColWidth: false,\n  })\n  const { bemFacets, bemAdd } = useBem('c-content-block-table', props, {})\n  const { parseMarkdown } = useMarkdown()\n  const { contentBlockAlignFacets } = useContentBlockAlign(props)\n\n  const hasColumnTitles = computed<boolean>(() => {\n    const hasEntries = Array.isArray(props.columnTitleList) && props.columnTitleList.length > 0\n    const hasValues = hasEntries ? props.columnTitleList.some(({ title }) => !!title) : false\n\n    return hasEntries && hasValues\n  })\n  const hasRowTitles = computed<boolean>(() => {\n    return props.rowContentList.some(({ title }) => !!title)\n  })\n  const numColumns = computed<number>(() => {\n    return props.rowContentList.reduce((acc, { columnCellList }) => {\n      return Math.max(acc, columnCellList.length)\n    }, 0)\n  })\n\n  const calculateColspan = (targetIdx: number, cellList: Array<TableCellData>) => {\n    return cellList.reduce((acc, cell, idx) => {\n      if (idx <= targetIdx) {\n        return acc\n      }\n\n      return cell.richText === SAME_VALUE_SIGN ? acc + 1 : acc\n    }, 1)\n  }\n\n  const adaptCells = (cellList: Array<TableCellData>) => {\n    return cellList\n      .map((cell, idx) => {\n        return {\n          ...cell,\n          colspan: calculateColspan(idx, cellList),\n        }\n      })\n      .filter(({ richText }) => {\n        return richText !== SAME_VALUE_SIGN\n      })\n  }\n\n  const rootClasses = computed<Array<string>>(() => {\n    return [\n      ...bemFacets.value,\n      ...contentBlockAlignFacets.value,\n      bemAdd(hasRowTitles ? 'has-row-titles' : 'no-row-titles'),\n      bemAdd(props.fixedColWidth ? ContentBlockTableFacet.Fixed : ''),\n    ]\n  })\n</script>\n\n<template>\n  <div :class=\"rootClasses\" class=\"c-content-block-table\">\n    <div class=\"c-content-block-table__box\">\n      <div v-if=\"title\" class=\"c-content-block-table__header\">\n        <h2>\n          {{ title }}\n        </h2>\n      </div>\n      <div class=\"c-content-block-table__content\">\n        <table class=\"c-content-block-table__table\">\n          <colgroup>\n            <col v-for=\"n in numColumns + (hasRowTitles ? 1 : 0)\" :key=\"n\" />\n          </colgroup>\n\n          <thead>\n            <tr v-if=\"hasColumnTitles\">\n              <th v-for=\"(columnTitle, columnTitleIdx) in columnTitleList\" :key=\"columnTitleIdx\">\n                <h3 class=\"u-reset\">\n                  {{ columnTitle.title }}\n                </h3>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              v-for=\"({ title, columnCellList }, rowContentItemIdx) in rowContentList\"\n              :key=\"rowContentItemIdx\"\n            >\n              <th v-if=\"title\">\n                <h3 class=\"u-reset\">\n                  {{ title }}\n                </h3>\n              </th>\n              <td\n                v-for=\"({ colspan, richText }, columnCellItemIdx) in adaptCells(columnCellList)\"\n                :key=\"columnCellItemIdx\"\n                :colspan=\"colspan <= 1 ? null : colspan\"\n                class=\"u-markdown-root c-content-block-table__content\"\n                v-html=\"parseMarkdown(`${richText}`)\"\n              />\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use '/assets/scss/util/color/color' as col;\n  @use '/assets/scss/util/anaglyph/anaglyph' as anaglyph;\n  @use '/assets/scss/base/font/font' as font;\n\n  $offset: 4px;\n\n  .c-content-block-table {\n    overflow: hidden;\n  }\n\n  .c-content-block-table--fixed {\n    .c-content-block-table__table {\n      table-layout: fixed;\n    }\n\n    colgroup col {\n      width: 50%;\n      overflow: hidden;\n      padding: 0;\n\n      &:nth-child(1) {\n        width: 200px;\n      }\n    }\n  }\n\n  .c-content-block-table__box {\n    @include anaglyph.with-shadow-apply(mono, $offset, $offset, 0, 0, col.$monochrome-lead);\n    background-color: col.$variant-cyan-light;\n    padding: 40px;\n    margin: 0 $offset $offset 0;\n  }\n\n  .c-content-block-table__header {\n    padding-bottom: 8px;\n    border-bottom: 2px solid col.$monochrome-black;\n    margin-bottom: 12px;\n  }\n\n  .c-content-block-table__table {\n    width: 100%;\n    border-collapse: collapse;\n\n    // All cells\n    thead th,\n    tbody th,\n    tbody td {\n      position: relative;\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background-color: col.$monochrome-black;\n      }\n    }\n\n    // First column title cell and row title cells\n    tbody tr > th {\n      text-align: right;\n      min-width: 200px;\n    }\n\n    // Column title cells\n    thead th {\n      vertical-align: middle;\n      padding: 8px 16px;\n    }\n\n    // Row title cells\n    tbody th {\n      vertical-align: top;\n      text-align: left;\n      padding: 12px 16px;\n    }\n\n    // Ordinary cells\n    tbody td {\n      vertical-align: top;\n      padding: 12px 16px;\n    }\n\n    // All titles\n    thead th,\n    tbody th {\n      h3 {\n        @include font.base-bold;\n      }\n    }\n\n    // Crop lines between table rows\n    thead tr,\n    tbody tr {\n      > :first-child::after {\n        left: 16px;\n        right: 0;\n      }\n\n      > :last-child::after {\n        left: 0;\n        right: 16px;\n      }\n    }\n\n    // Alternating table background\n    thead {\n      &:empty + tbody tr {\n        &:nth-child(2n + 0) {\n          background-color: rgba(col.$brand-cyan, 0.1);\n        }\n      }\n\n      &:not(:empty) + tbody tr {\n        &:nth-child(2n + 1) {\n          background-color: rgba(col.$brand-cyan, 0.1);\n        }\n      }\n    }\n  }\n</style>\n"],"names":["SAME_VALUE_SIGN","bemFacets","bemAdd","useBem","props","parseMarkdown","useMarkdown","contentBlockAlignFacets","useContentBlockAlign","hasColumnTitles","computed","hasEntries","hasValues","title","hasRowTitles","numColumns","acc","columnCellList","calculateColspan","targetIdx","cellList","cell","idx","adaptCells","richText","rootClasses","ContentBlockTableFacet"],"mappings":"g4BAyBEA,EAAA,IAQA,CAAA,UAAAC,EAAA,OAAAC,CAAA,EAAAC,EAAA,wBAAAC,EAAA,CAAA,CAAA,EACA,CAAA,cAAAC,GAAAC,IACA,CAAA,wBAAAC,CAAA,EAAAC,EAAAJ,CAAA,EAEAK,EAAAC,EAAA,IAAA,CACE,MAAAC,EAAA,MAAA,QAAAP,EAAA,eAAA,GAAAA,EAAA,gBAAA,OAAA,EACAQ,EAAAD,EAAAP,EAAA,gBAAA,KAAA,CAAA,CAAA,MAAAS,KAAA,CAAA,CAAAA,CAAA,EAAA,GAEA,OAAAF,GAAAC,CAAqB,CAAA,EAEvBE,EAAAJ,EAAA,IACEN,EAAA,eAAA,KAAA,CAAA,CAAA,MAAAS,KAAA,CAAA,CAAAA,CAAA,CAAuD,EAEzDE,EAAAL,EAAA,IACEN,EAAA,eAAA,OAAA,CAAAY,EAAA,CAAA,eAAAC,KACE,KAAA,IAAAD,EAAAC,EAAA,MAAA,EAA0C,CAAA,CACxC,EAGNC,EAAA,CAAAC,EAAAC,IACEA,EAAA,OAAA,CAAAJ,EAAAK,EAAAC,IACEA,GAAAH,EACEH,EAGFK,EAAA,WAAArB,EAAAgB,EAAA,EAAAA,EAAqD,CAAA,EAIzDO,EAAAH,GACEA,EAAA,IAAA,CAAAC,EAAAC,KAEI,CAAO,GAAAD,EACF,QAAAH,EAAAI,EAAAF,CAAA,CACoC,EACzC,EAAA,OAAA,CAAA,CAAA,SAAAI,KAGAA,IAAAxB,CAAoB,EAI1ByB,EAAAf,EAAA,IACE,CAAO,GAAAT,EAAA,MACQ,GAAAM,EAAA,MACcL,EAAAY,EAAA,iBAAA,eAAA,EAC6BZ,EAAAE,EAAA,cAAAsB,EAAA,MAAA,EAAA,CACM,CAChE"}