{"version":3,"names":["cardCss","LgrCardStyle0","Card","render","h","Host","key","tabindex","class","isEmpty","this","imageSrc","src","alt","imageAlt","name","icon","heading","dark","size","headingSize","role","textSize","mainButtonLabel","onClick","mainAction","secondaryButtonLabel","variant","secondaryAction"],"sources":["src/components/card/card.scss?tag=lgr-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@import '../../global/variables/grid';\n\n:host {\n  height: 100%;\n  \n}\n\n.lgr-card {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--lgr-color-neutral-high-pure);\n  border: 1px solid var(--lgr-color-neutral-high-medium);\n  border-radius: var(--lgr-border-radius-lg);\n  overflow: hidden;\n  transition: transform .3s ease;\n\n  &:hover {\n    transform: translateY(-1.5rem);\n    box-shadow: 0px 4px 10px 0px rgba(68, 88, 122, 0.20);\n    z-index: 1;\n    transition: transform .5s ease, box-shadow .5s ease;\n  }\n\n  lgr-heading {\n    color: var(--lgr-color-neutral-low-dark);\n  }\n\n  img {\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    max-height: 440px;\n    object-position: 50% 50%;\n    overflow: hidden;\n  }\n\n  ::slotted(img) {\n    width: 100%;\n    height: auto;\n  }\n\n  .lgr-card-content-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    margin: 32px;\n    overflow: hidden;\n\n    @media (min-width: $lgr-grid-md-lg-break-point) {\n      margin: 24px 24px 32px;\n    }\n\n    .lgr-card-text-container {\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n\n      lgr-icon {\n        font-size: var(--lgr-font-size-xxxl);\n      }\n    }\n\n    .lgr-card-buttons-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      margin-top: var(--lgr-spacing-xxs);\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport { isEmpty } from '../../utils/helpers/helpers';\n\n@Component({\n  tag: 'lgr-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  /**\n   * The path for the card's image file.\n   */\n  @Prop({ reflect: true }) imageSrc?: string;\n  /**\n   * Textual description for the card's image.\n   */\n  @Prop({ reflect: true }) imageAlt?: string;\n\n  /**\n   * Icon name to be used on the card.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Main title for the card.\n   */\n  @Prop({ reflect: true }) heading?: string;\n  /**\n   * \n   */\n  @Prop({ reflect: true }) headingSize: 'xx-large' | 'x-large' | 'large' | 'medium' | 'small' | 'x-small' = 'medium'\n  /**\n   * \n   */\n  @Prop({ reflect: true }) textSize?: 'large' | 'small' | 'x-small' = 'x-small';\n  /**\n   * Text to be placed in the main button.\n   */\n  @Prop() mainButtonLabel?: string;\n  /**\n   * Text to be placed in the secondary button.\n   */\n  @Prop() secondaryButtonLabel?: string;\n  /**\n   * Action to be performed when the main button is clicked.\n   */\n  @Prop() mainAction?: () => void;\n  /**\n   * Action to be performed when the secondary button is clicked.\n   */\n  @Prop() secondaryAction?: () => void;\n\n  render() {\n    return (\n      <Host tabindex=\"0\">\n        <div class=\"lgr-card\">\n          <div class=\"lgr-card-image-container\">\n            {!isEmpty(this.imageSrc) && (\n              <img src={this.imageSrc} alt={this.imageAlt}></img>\n            )}\n            <slot />\n          </div>\n          <div class=\"lgr-card-content-container\">\n            <div class=\"lgr-card-text-container\">\n              <slot name=\"tag\" />\n              {!isEmpty(this.icon) && isEmpty(this.imageSrc) && <lgr-icon aria-hidden=\"true\">{this.icon}</lgr-icon>}\n              {!isEmpty(this.heading) && <lgr-heading dark size={this.headingSize} role=\"heading\">{this.heading}</lgr-heading>}\n              <lgr-text role=\"text\" size={this.textSize}>\n                <slot name=\"text\" />\n              </lgr-text>\n            </div>\n            <div class=\"lgr-card-number-container\">\n              <slot name=\"number\" />\n            </div>\n            <div class=\"lgr-card-buttons-container\">\n              {!isEmpty(this.mainButtonLabel) && (\n                <lgr-button size=\"small\" onClick={this.mainAction}>\n                  {this.mainButtonLabel}\n                </lgr-button>\n              )}\n              {!isEmpty(this.secondaryButtonLabel) && (\n                <lgr-button size=\"small\" variant=\"text\" onClick={this.secondaryAction}>\n                  {this.secondaryButtonLabel}\n                </lgr-button>\n              )}\n              <slot name=\"main-button\" />\n              <slot name=\"secondary-button\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAU,+uCAChB,MAAAC,EAAeD,E,MCOFE,EAAI,M,qIAsB2F,S,cAItC,U,4HAkBpE,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,SAAS,KACbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACPC,EAAQC,KAAKC,WACbP,EAAA,OAAKQ,IAAKF,KAAKC,SAAUE,IAAKH,KAAKI,WAErCV,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,8BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2BACTJ,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SACTN,EAAQC,KAAKM,OAASP,EAAQC,KAAKC,WAAaP,EAAA,0BAAsB,QAAQM,KAAKM,OACnFP,EAAQC,KAAKO,UAAYb,EAAA,eAAac,KAAI,KAACC,KAAMT,KAAKU,YAAaC,KAAK,WAAWX,KAAKO,SAC1Fb,EAAA,YAAAE,IAAA,2CAAUe,KAAK,OAAOF,KAAMT,KAAKY,UAC/BlB,EAAA,QAAAE,IAAA,2CAAMS,KAAK,WAGfX,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACPC,EAAQC,KAAKa,kBACbnB,EAAA,cAAYe,KAAK,QAAQK,QAASd,KAAKe,YACpCf,KAAKa,kBAGRd,EAAQC,KAAKgB,uBACbtB,EAAA,cAAYe,KAAK,QAAQQ,QAAQ,OAAOH,QAASd,KAAKkB,iBACnDlB,KAAKgB,sBAGVtB,EAAA,QAAAE,IAAA,2CAAMS,KAAK,gBACXX,EAAA,QAAAE,IAAA,2CAAMS,KAAK,wB"}