{"version":3,"names":["cardHighlightedCss","LgrCardHighlightedStyle0","CardHighlighted","render","h","Host","key","class","this","shortImage","tag","tagsText","variant","name"],"sources":["src/components/cardHighlighted/cardHighlighted.scss?tag=lgr-card-highlighted&encapsulation=shadow","src/components/cardHighlighted/cardHighlighted.tsx"],"sourcesContent":["@import '../../global/variables/grid';\n\n:host {\n  .lgr-card-highlighted {\n    display: flex;\n    flex-direction: row;\n    height: 224px;\n    max-height: 224px;\n    overflow: hidden;\n    border-radius: var(--lgr-border-radius-lg);\n    border: 1px solid var(--lgr-color-neutral-high-medium);\n    background: var(--lgr-color-neutral-high-pure);\n\n    .image-wrapper {\n      width: 112px;\n      min-width: 112px;\n      height: 50%;\n      border-bottom-right-radius: 28px;\n      overflow: hidden;\n\n      ::slotted(img) {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center;\n      }\n    }\n\n    .text-button-wrapper {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      padding: var(--lgr-spacing-xxxs);\n\n      .text-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: var(--lgr-spacing-xxxs);\n\n        [name=\"title\"] {\n          font-family: var(--lgr-font-family-bold);\n          font-size: var(--lgr-font-size-md);\n          line-height: var(--lgr-spacing-xxs);\n          color: var(--lgr-color-neutral-low-dark);\n          overflow: hidden;\n          display: -webkit-box;\n          -webkit-line-clamp: 2;\n          -webkit-box-orient: vertical;\n          max-height: 3em;\n        }\n\n        [name=\"authors\"] {\n          font-family: var(--lgr-font-family-regular);\n          font-size: var(--lgr-font-size-xs);\n          line-height: var(--lgr-spacing-xxxs);\n        }\n      }\n    }\n\n    @media (min-width: $lgr-grid-md-break-point) {\n      background: transparent;\n\n      .image-wrapper,\n      .text-button-wrapper {\n        width: 50%;\n      }\n\n      .image-wrapper {\n        height: 100%;\n        max-width: unset;\n        border-bottom-right-radius: 76px;\n      }\n\n      &-short {\n        .image-wrapper {\n          height: 50%;\n          width: 112px;\n          min-width: 112px;\n          border-bottom-right-radius: 28px;\n        }\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'lgr-card-highlighted',\n  styleUrl: 'cardHighlighted.scss',\n  shadow: true,\n})\nexport class CardHighlighted {\n\n  /**\n   * Tag's text\n   */\n  @Prop() tagsText!: string;\n  /**\n   * Short image variation\n   */\n  @Prop() shortImage: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"lgr-card-highlighted\": true,\n            \"lgr-card-highlighted-short\": this.shortImage\n          }}\n        >\n          <div class=\"image-wrapper\">\n            <slot/>\n          </div>\n          <div class=\"text-button-wrapper\">\n            <div class=\"text-wrapper\">\n              <lgr-tag tag={this.tagsText} variant=\"warning\"></lgr-tag>\n              <slot name=\"title\"></slot>\n              <slot name=\"authors\"></slot>\n            </div>\n            <slot name=\"button\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,2oDAC3B,MAAAC,EAAeD,E,MCMFE,EAAe,M,iEASI,K,CAE9B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,uBAAwB,KACxB,6BAA8BC,KAAKC,aAGrCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,WAAAE,IAAA,2CAASI,IAAKF,KAAKG,SAAUC,QAAQ,YACrCR,EAAA,QAAAE,IAAA,2CAAMO,KAAK,UACXT,EAAA,QAAAE,IAAA,2CAAMO,KAAK,aAEbT,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a"}