{"version":3,"file":"ContentsCard-203a3d4b.js","sources":["../../../node_modules/vue-material-design-icons/MessageReplyText.vue","../../../app/frontend/components/contents/ContentsCard.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon message-reply-text-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M18,8H6V6H18V8M18,11H6V9H18V11M18,14H6V12H18V14M22,4A2,2 0 0,0 20,2H4A2,2 0 0,0 2,4V16A2,2 0 0,0 4,18H18L22,22V4Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MessageReplyTextIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","/**\n * @fileoverview レポート・特集・用語集の一覧等に表示する用のカードレイアウトコンポーネント\n */\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport MessageReplyText from 'vue-material-design-icons/MessageReplyText.vue'\nimport { defaultProps, defaultFunction } from '@/components/_parials/contentsCard'\nimport { DATE_FORMAT_JA_WITH_DAY_OF_WEEK } from '@/constants/dateFormat'\nimport { localeDateJa } from '@/utilities/formatter'\n\nexport default defineComponent({\n  name: 'ContentsCard',\n\n  components: {\n    MessageReplyText,\n  },\n\n  props: {\n    ...defaultProps,\n  },\n\n  setup(props) {\n    // constants\n    const THEMES = inject<Record<string, string>>('THEMES') || {}\n\n    const {\n      // computed\n      sizeStateClass,\n      linkTo,\n      highlightHeading,\n      highlightDescription,\n      wrapperTagName,\n      computedHeadingOptions,\n      computedImageOptions,\n      cssVariables,\n    } = defaultFunction(props)\n\n    return {\n      // constants\n      DATE_FORMAT_JA_WITH_DAY_OF_WEEK,\n      THEMES,\n\n      // computed\n      sizeStateClass,\n      linkTo,\n      highlightHeading,\n      highlightDescription,\n      wrapperTagName,\n      computedHeadingOptions,\n      computedImageOptions,\n      cssVariables,\n\n      // methods\n      localeDateJa,\n    }\n  },\n})\n</script>\n\n<template>\n  <component\n    :is=\"wrapperTagName\"\n    v-if=\"item\"\n    :class=\"[\n      'l-unit__contentsCard',\n      sizeStateClass,\n      { 'is-read': item.isRead },\n    ]\"\n    :href=\"linkTo\"\n    :data-horizontal-pc=\"horizontal.pc\"\n    :data-horizontal-sp=\"horizontal.sp\"\n    :data-hero=\"hasHero && item.thumbImageUrl\"\n    :style=\"cssVariables\">\n    <div class=\"l-unit__contentsCard--header\">\n      <div\n        :class=\"[\n          'o-heading__contentsCard',\n          sizeStateClass,\n          { 'is-read': item.isRead },\n        ]\">\n        <component\n          :is=\"computedHeadingOptions.tagName\"\n          class=\"o-heading__contentsCard--item\"\n          :style=\"{\n            'max-height': computedHeadingOptions.maxHeight,\n            'line-height': computedHeadingOptions.lineHeight,\n            'font-weight': computedHeadingOptions.fontWeight,\n            '--font-size-pc': computedHeadingOptions.fontSize.pc,\n            '--font-size-sp': computedHeadingOptions.fontSize.sp,\n          }\"\n          v-html=\"highlightHeading\" />\n      <!-- /.o-heading__contentsCard --></div>\n    <!-- /.l-unit__contentsCard header --></div>\n\n    <div\n      v-if=\"hasHero && item.thumbImageUrl\"\n      class=\"l-unit__contentsCard--image\">\n      <img\n        v-lazy=\"item.thumbImageUrl\"\n        class=\"img\"\n        alt=\"\">\n    <!-- /.l-unit__contentsCard image --></div>\n\n    <div\n      v-if=\"item.description\"\n      class=\"l-unit__contentsCard--description\">\n      <div class=\"o-label__description\">\n        <p\n          class=\"o-label__description--item\"\n          v-html=\"highlightDescription\" />\n      <!-- /.o-label__description --></div>\n    <!-- /.l-unit__contentsCard description --></div>\n\n    <div\n      v-if=\"item.tags && item.tags.length\"\n      class=\"l-unit__contentsCard--action is-tag\">\n      <div class=\"o-list__tag\">\n        <ul class=\"o-list__tag--items\">\n          <li\n            v-for=\"tag in item.tags\"\n            :key=\"tag.to\"\n            class=\"o-list__tag--item\">\n            <div class=\"o-action__tag\">\n              <a\n                class=\"o-action__tag--item\"\n                :href=\"tag.to\">\n                # {{ tag.label }}\n              </a>\n            <!-- /.o-action__tag --></div>\n          </li>\n        </ul>\n      <!-- /.o-list__tag --></div>\n    <!-- /.l-unit__contentsCard action --></div>\n\n    <div\n      v-if=\"item.totalComments || item.publisher\"\n      class=\"l-unit__contentsCard--footer\">\n      <div class=\"l-cols__footer\">\n        <div\n          v-if=\"item.totalComments\"\n          class=\"l-cols__footer--col is-comment\">\n          <div class=\"o-label__totalComments\">\n            <p class=\"o-label__totalComments--item\">\n              <span class=\"o-label__totalComments--icon\">\n                <MessageReplyText size=\"100%\" />\n              </span>\n              <span class=\"o-label__totalComments--label\">\n                {{ item.totalComments }}\n              </span>\n            </p>\n          <!-- /.o-label__totalComments --></div>\n        <!-- /.l-cols__footer col --></div>\n\n        <div\n          v-if=\"item.publisher\"\n          class=\"l-cols__footer--col is-publisher\">\n          <div class=\"o-label__publisher\">\n            <p class=\"o-label__publisher--item\">\n              <span\n                v-if=\"item.publisher.iconUrl\"\n                class=\"o-label__publisher--icon\">\n                <img\n                  class=\"img\"\n                  :src=\"item.publisher.iconUrl\"\n                  alt=\"\"\n                  data-is-liquid=\"true\">\n              </span>\n              <span class=\"o-label__publisher--label\">\n                {{ item.publisher.name }}\n              </span>\n            </p>\n          <!-- /.o-label__publisher --></div>\n        <!-- /.l-cols__footer col --></div>\n      <!-- /.l-cols__footer --></div>\n    <!-- /.l-unit__contentsCard footer --></div>\n\n    <div\n      v-if=\"item.themeId\"\n      class=\"l-unit__contentsCard--footer is-theme\">\n      <div class=\"o-label__theme\">\n        <p class=\"o-label__theme--item\">\n          {{ THEMES[item.themeId] }}\n        </p>\n      <!-- /.o-label__theme --></div>\n    <!-- /.l-unit__contentsCard footer --></div>\n\n    <div\n      v-if=\"item.publishDate\"\n      class=\"l-unit__contentsCard--footer is-date\">\n      <div class=\"o-label__date\">\n        <p class=\"o-label__date--item\">\n          <time\n            class=\"time\"\n            :datetime=\"item.publishDate\">\n            {{ localeDateJa(item.publishDate, DATE_FORMAT_JA_WITH_DAY_OF_WEEK) }} 掲載\n          </time>\n        </p>\n      <!-- /.o-label__date --></div>\n    <!-- /.l-unit__contentsCard footer --></div>\n  <!-- /.l-unit__contentsCard --></component>\n</template>\n\n<style lang=\"sass\" scoped>\n$icon-width: 1.2em  // same size as solution logo in SolutionName.vue\n$icon-margin: 0.4em\n\n// layout\n.l-unit__contentsCard\n  $root: &\n  text-decoration: none\n  overflow: hidden\n  margin-top: 1em\n  +transition\n\n  &:first-child\n    margin-top: 0\n\n  &[href]\n    +mouseover\n      .o-heading__contentsCard--item\n        text-decoration: underline\n\n      #{$root}--image\n        opacity: 0.5\n\n    &:has(#{$root}--footer.is-name.is-link:hover)\n      .o-heading__contentsCard--item\n        text-decoration: none\n\n      #{$root}--image\n        opacity: 1\n\n    &:has(#{$root}--action.is-tag:hover)\n      .o-heading__contentsCard--item\n        text-decoration: none\n\n      #{$root}--image\n        opacity: 1\n\n  & &--image\n    +transition\n\n    > .img\n      height: 100%\n      display: block\n      object-fit: cover\n      position: absolute\n      top: 50%\n      left: 50%\n      transform: translate(-50%, -50%)\n\n      &[lazy=\"loading\"],\n      &[lazy=\"error\"]\n        object-fit: contain\n\n  & &--description,\n  & &--footer\n    margin-top: 0.5em\n\n  // Phablet 以上のとき\n  +breakpoint($max: false, $min: true)\n    // 縦型（PC）\n    &[data-horizontal-pc=\"false\"]\n      $image-width: 200\n      $image-height: 100\n      --image-width-pc: #{$image-width}px\n      --image-height-pc: #{$image-height}px\n      +base-layout($image-position: top, $root: $root)\n\n      #{$root}--header\n        flex-grow: 1\n\n      #{$root}--image\n        position: relative\n        margin-bottom: 0.6em\n\n        &:first-child:last-child\n          margin-bottom: 0\n\n        &::before\n          content: \"\"\n          width: 0\n          display: block\n          padding-top: var(--image-height-pc)\n\n      #{$root}--action\n        &.is-tag\n          margin-top: 0.5em\n\n      #{$root}--footer\n        margin-top: 0.5em\n\n    // 横型（PC）\n    &[data-horizontal-pc=\"true\"]\n      $image-width: 200\n      $image-height: 100\n      $margin: 16\n      +base-layout($image-position: left, $root: $root, $image-width: $image-width, $image-height: $image-height, $margin-size: $margin)\n      --image-width-pc: #{$image-width}px\n      --image-height-pc: #{$image-height}px\n      $image-area-size: calc(var(--image-width-pc) + #{$margin}px)\n      min-height: var(--image-height-pc)\n      padding-left: $image-area-size\n\n      #{$root}--header\n        margin-bottom: 0.1em\n\n      #{$root}--image\n        width: var(--image-width-pc)\n        height: var(--image-height-pc)\n        margin-bottom: 0\n\n      #{$root}--action\n        &.is-tag\n          order: -1\n          line-height: 1\n          margin-bottom: 0.5em\n\n    &[data-hero=\"false\"]\n      min-height: 0\n      padding-left: 0\n\n  +breakpoint\n    #{$root}--description\n      margin-top: 0.25em\n\n    // 縦型（SP）\n    &[data-horizontal-sp=\"false\"]\n      +base-layout($image-position: top, $root: $root)\n\n      #{$root}--header\n        flex-grow: 1\n\n      #{$root}--image\n        height: 100%\n        position: relative\n        margin-bottom: 0.6em\n\n        &:first-child:last-child\n          margin-bottom: 0\n\n        &::before\n          content: \"\"\n          width: 0\n          display: block\n          padding-top: 50%\n\n      #{$root}--action\n        &.is-tag\n          margin-top: 0.5em\n\n      #{$root}--footer\n        margin-top: 0.5em\n\n    // 横型（SP）\n    &[data-horizontal-sp=\"true\"]\n      $image-width: 140\n      $image-height: 72\n      $margin: 12\n      +base-layout($image-position: left, $root: $root, $image-width: $image-width, $image-height: $image-height, $margin-size: $margin)\n      --image-width-sp: #{$image-width}px\n      --image-height-sp: #{$image-height}px\n      $image-area-size: calc(var(--image-width-sp) + #{$margin}px)\n      min-height: var(--image-height-sp)\n      padding-left: $image-area-size\n\n      #{$root}--header\n        margin-bottom: 0.6em\n\n      #{$root}--image\n        width: var(--image-width-sp)\n        height: var(--image-height-sp)\n        margin-bottom: 0\n\n      #{$root}--action\n        &.is-tag\n          order: -1\n          line-height: 1\n          margin-bottom: 0.5em\n\n    &[data-hero=\"false\"]\n      min-height: 0\n      padding-left: 0\n\n\n.l-cols__footer\n  $root: &\n  display: flex\n\n  & &--col\n    margin-left: 1em\n\n    &:first-child\n      margin-left: 0\n\n    &.is-publisher\n      min-width: 0  // for text-overflow in publisher label\n\n// object\n.o-heading__contentsCard\n  $root: &\n  --font-size-pc: $font-large\n  --font-size-sp: $font-large\n\n  & &--item\n    overflow: hidden\n    color: $font-black\n    font-size: var(--font-size-pc)\n\n  &.is-read\n    #{$root}--item\n      color: $font-light-gray\n\n  +breakpoint\n    #{$root}--item\n      font-size: var(--font-size-sp)\n\n.o-list__tag\n  & &--items\n    display: flex\n    flex-wrap: wrap\n    margin-left: -0.5em\n\n  & &--item\n    margin-left: 0.5em\n\n.o-action__tag\n  & &--item\n    display: block\n    line-height: 1.4\n    color: $font-black\n    font:\n      size: $font-x-small\n      weight: bold\n    text-decoration: none\n    +transition\n\n    &:hover\n      text-decoration: underline\n\n.o-label__description\n  $line-height: 1.6\n  $max-line: 2\n  & &--item\n    max-height: #{$max-line * $line-height}em\n    overflow: hidden\n    line-height: $line-height\n    color: $font-light-gray\n    font-size: $font-small\n\n.o-label__totalComments\n  $root: &\n\n  & &--item\n    display: flex\n    align-items: center\n    line-height: 1\n    color: $font-gray\n    font-size: $font-x-small\n\n  & &--icon\n    width: $icon-width\n    position: relative\n    top: 0.05em\n    margin-right: $icon-margin\n\n.o-label__publisher\n  & &--item\n    display: flex\n    align-items: center\n    line-height: 1\n    font-size: $font-x-small\n\n  & &--icon\n    width: $icon-width\n    min-width: $icon-width  // for text-overflow in publisher label (To ensure the width of the flex item)\n    display: block\n    margin-right: $icon-margin\n\n  & &--label\n    height: 1em\n    display: block\n    overflow: hidden\n    color: $font-gray\n    text-overflow: ellipsis\n    white-space: nowrap\n\n.o-label__theme\n  & &--item\n    line-height: 1\n    color: $font-gray\n    font-size: $font-x-small\n\n.o-label__date\n  & &--item\n    line-height: 1\n    color: $font-gray\n    font-size: $font-x-small\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_ctx","$props","_cache","$event","_createElementVNode","_openBlock","defineComponent","MessageReplyText","defaultProps","props","THEMES","inject","sizeStateClass","linkTo","highlightHeading","highlightDescription","wrapperTagName","computedHeadingOptions","computedImageOptions","cssVariables","defaultFunction","DATE_FORMAT_JA_WITH_DAY_OF_WEEK","localeDateJa","_hoisted_2","_hoisted_4","_hoisted_7","_hoisted_12","_hoisted_14","_hoisted_16","_hoisted_19","_hoisted_22","_hoisted_25","_hoisted_28","_directive_lazy","_resolveDirective","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_hoisted_1","_withDirectives","_createCommentVNode","_hoisted_5","_hoisted_8","_hoisted_9","_Fragment","_renderList","tag","_hoisted_10","_hoisted_13","_hoisted_15","_hoisted_17","_createVNode","_component_MessageReplyText","_hoisted_20","_hoisted_21","_hoisted_26","_hoisted_29","_hoisted_30"],"mappings":"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","x_google_ignoreList":[0]}