{"version":3,"names":["expandableAreaCss","LgrExpandableAreaStyle0","ExpandableArea","this","areaExpanded","expanded","componentDidLoad","cards","el","querySelector","render","h","Host","key","class","style","offsetHeight","contentHeight","name","onClick"],"sources":["src/components/expandableArea/expandableArea.scss?tag=lgr-expandable-area&encapsulation=shadow","src/components/expandableArea/expandableArea.tsx"],"sourcesContent":["@import '../../global/variables/grid';\n\n:host {\n  display: block;\n\n  .lgr-expandable-area {\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    max-height: 100%;\n    transition: max-height ease .3s;    \n\n    &-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: var(--lgr-color-brand-primary);\n      color: var(--lgr-color-neutral-high-pure);\n      border: none;\n      padding: 0;\n      margin: 0 var(--lgr-spacing-nano);\n      outline: unset;\n      font-size: var(--lgr-font-size-xxl);\n      text-align: center;\n      text-decoration: none;\n      cursor: pointer;\n      user-select: none;\n      min-width: 48px;\n      width: 48px;\n      min-height: 48px;\n      height: 48px;\n      border-radius: 50%;\n      transition: transform ease .3s;\n\n      &-open {\n        transform: rotate(180deg);\n        transition: transform ease .3s;\n      }\n    }\n\n    @media (min-width: $lgr-grid-md-break-point) {\n      max-height: 100% !important;\n\n      &-button {\n        display: none;\n      }\n    }\n  }\n}","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'lgr-expandable-area',\n  styleUrl: 'expandableArea.scss',\n  shadow: true,\n})\n\nexport class ExpandableArea {\n\n  @Element() el!: HTMLLgrExpandableAreaElement;\n  /**\n   * Height of visible collapsed area\n   */\n  @Prop() contentHeight: string = \"116\";\n  \n  @State() expanded: boolean = false;\n  \n  private cards!: HTMLSlotElement;\n\n  componentDidLoad() {\n    this.cards = this.el.querySelector('[slot=\"cards\"]') as HTMLSlotElement;\n  }\n\n  render() {\n\n    return (\n      <Host>\n        <div\n          class=\"lgr-expandable-area\"\n          style={{\"max-height\": this.expanded ? `${this.cards.offsetHeight}px` : `${this.contentHeight}px`}}\n        >\n          <div>\n            <slot name=\"cards\"></slot>\n          </div>\n          <button\n            class={{\n              \"lgr-expandable-area-button\": true,\n              \"lgr-expandable-area-button-open\": this.expanded\n            }}\n            onClick={this.areaExpanded}\n          >\n            <lgr-icon>expand_more</lgr-icon>\n          </button>\n        </div>\n\n      </Host>\n    );\n  }\n\n  private areaExpanded = () => {\n    this.expanded = !this.expanded;\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,6zBAC1B,MAAAC,EAAeD,E,MCOFE,EAAc,M,yBA0CjBC,KAAAC,aAAe,KACrBD,KAAKE,UAAYF,KAAKE,QAAQ,E,mBArCA,M,cAEH,K,CAI7B,gBAAAC,GACEH,KAAKI,MAAQJ,KAAKK,GAAGC,cAAc,iB,CAGrC,MAAAC,GAEE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,sBACNC,MAAO,CAAC,aAAcZ,KAAKE,SAAW,GAAGF,KAAKI,MAAMS,iBAAmB,GAAGb,KAAKc,oBAE/EN,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMK,KAAK,WAEbP,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,6BAA8B,KAC9B,kCAAmCX,KAAKE,UAE1Cc,QAAShB,KAAKC,cAEdO,EAAA,YAAAE,IAAA,6D"}