{"version":3,"names":["navigationMainCss","EonUiNavigationMainStyle0","NavigationMain","NAVIGATION_MAIN_BURGERPOSITION_LEFT","componentWillLoad","this","getRelatedComponents","navigation","document","getElementById","handleBurgerClick","_event","burgerClick","emit","preventDefault","burgerActive","closeMobileNav","openMobileNav","renderBurger","h","class","pfx","active","onClick","event","id","render","Host","key","burgerPosition","NAVIGATION_MAIN_BURGERPOSITION_RIGHT"],"sources":["src/components/navigation/navigation-components/navigation-main/navigation-main.scss?tag=eon-ui-navigation-main&encapsulation=shadow","src/components/navigation/navigation-components/navigation-main/navigation-main.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.#{$prefix}navigation-main-wrapper {\n  position: relative;\n  width: 100%;\n  height: 64px;\n  background-color: $navigation-main-bg-color;\n  z-index: 90;\n\n  eon-ui-color-separator {\n    position: absolute;\n    bottom: -8px;\n    z-index: 0;\n  }\n\n  .#{$prefix}navigation-main-inner {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    max-width: $content-max-width-desktop-l;\n    margin: 0 auto 0 auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: stretch;\n    z-index: 99;\n\n    @include for-size(desktop-or-smaller) {\n      max-width: $content-max-width-desktop;\n    }\n  }\n}\n\n.#{$prefix}toggle-mobile-nav {\n  position: relative;\n  height: 100%;\n  font-family: $font-family-base;\n  font-size: 18px;\n  line-height: 24px;\n  text-align: center;\n  padding: 24px 8px 24px 8px;\n  margin: 0px 8px 0px 8px;\n  color: $navigation-main-link-font-color;\n  background-color: $navigation-main-link-bg-color;\n  text-decoration: none;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: none;\n  border: 0;\n\n  @include for-size(tablet-or-smaller) {\n    display: flex;\n  }\n\n  $transition-time: 0.4s;\n  $rotation: 45deg;\n  $translateY: (16px * 0.5);\n  $translateX: 0px;\n\n  // &::after {\n  //   content: \"\";\n  //   position: absolute;\n  //   left: 0;\n  //   bottom: -8px;\n  //   width: 100%;\n  //   height: 8px;\n  //   background-color: $navigation-main-link-border-color;\n  // }\n\n  &:hover {\n    color: $navigation-main-link-font-color-hover;\n    background-color: $navigation-main-link-bg-color-hover !important;\n\n    // &::after {\n    //   background-color: $navigation-main-link-border-color-hover;\n    // }\n  }\n\n  &:focus {\n    color: $navigation-main-link-font-color-focus;\n    background-color: $navigation-main-link-bg-color-focus !important;\n    outline: none;\n\n    // &::after {\n    //   background-color: $navigation-main-link-border-color-focus;\n    // }\n  }\n\n  &.#{$prefix}current {\n    color: $navigation-main-link-font-color-current;\n    background-color: $navigation-main-link-bg-color-current;\n\n    // &::after {\n    //   background-color: $navigation-main-link-border-color-current;\n    // }\n\n    &:hover {\n      color: $navigation-main-link-font-color-current-hover;\n      background-color: $navigation-main-link-bg-color-current-hover;\n\n      // &::after {\n      //   background-color: $navigation-main-link-border-color-current-hover;\n      // }\n    }\n\n    &:focus {\n      color: $navigation-main-link-font-color-current-focus;\n      background-color: $navigation-main-link-bg-color-current-focus;\n      outline: none;\n\n      // &::after {\n      //   background-color: $navigation-main-link-border-color-current-focus;\n      // }\n    }\n  }\n\n  &.#{$prefix}active {\n    color: $navigation-main-link-font-color-active;\n    background-color: $navigation-main-link-bg-color-active;\n\n    // &::after {\n    //   background-color: $navigation-main-link-border-color-active;\n    // }\n\n    &:hover {\n      color: $navigation-main-link-font-color-active-hover;\n      background-color: $navigation-main-link-bg-color-active-hover;\n\n      // &::after {\n      //   background-color: $navigation-main-link-border-color-active-hover;\n      // }\n    }\n\n    &:focus {\n      color: $navigation-main-link-font-color-active-focus;\n      background-color: $navigation-main-link-bg-color-active-focus;\n      outline: none;\n\n      // &::after {\n      //   background-color: $navigation-main-link-border-color-active-focus;\n      // }\n    }\n\n    #hamburger-icon {\n      .line-1 {\n        transform: translateY($translateY) translateX($translateX) rotate($rotation);\n        -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);\n        -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);\n      }\n\n      .line-2 {\n        opacity: 0;\n      }\n\n      .line-3 {\n        transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);\n        -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);\n        -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);\n      }\n    }\n  }\n\n  #hamburger-icon {\n    position: relative;\n    width: 24px;\n    height: 18px;\n    display: block;\n    cursor: pointer;\n\n    .line {\n      display: block;\n      background: $navigation-main-link-font-color;\n      width: 24px;\n      height: 2px;\n      position: absolute;\n      left: 0;\n      border-radius: (2px * 0.5);\n      transition: all $transition-time;\n      -webkit-transition: all $transition-time;\n      -moz-transition: all $transition-time;\n\n      &.line-1 {\n        top: 0;\n      }\n\n      &.line-2 {\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      &.line-3 {\n        bottom: 0;\n      }\n    }\n  }\n}\n","import { h, Component, Host, Element, Prop, Event, EventEmitter } from \"@stencil/core\";\nimport pfx from \"../../../../utils/style-class-prefix-helper\";\nimport { BurgerPosition } from \"./constants/navigation-main-types\";\nimport {\n  NAVIGATION_MAIN_BURGERPOSITION_LEFT,\n  NAVIGATION_MAIN_BURGERPOSITION_RIGHT\n} from \"./constants/navigation-main-constants\";\n// import { InitLogging } from \"../../../../decorators/init-logging\";\n\n/**\n * @slot [unnamed] - holds up to three column components.\n */\n@Component({\n  tag: \"eon-ui-navigation-main\",\n  styleUrl: \"navigation-main.scss\",\n  shadow: true\n})\nexport class NavigationMain {\n  // @InitLogging() sentryTransaction;\n  navigation: HTMLEonUiNavigationElement;\n\n  @Element() hostElement: HTMLEonUiNavigationMainElement;\n\n  /**\n   * Defines the state of the burger.\n   */\n  @Prop({ mutable: true }) burgerActive: boolean = false;\n\n  /**\n   * Defines which navigation sections should stay visible when scrolling down.\n   */\n  @Prop() burgerPosition: BurgerPosition = NAVIGATION_MAIN_BURGERPOSITION_LEFT;\n\n  /**\n   * Emits when burger menu is clicked.\n   */\n  @Event() burgerClick: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.getRelatedComponents();\n  }\n\n  getRelatedComponents() {\n    this.navigation = document.getElementById(\"eonui-navigation\") as HTMLEonUiNavigationElement;\n  }\n\n  async handleBurgerClick(_event: Event) {\n    this.burgerClick.emit();\n    _event.preventDefault();\n\n    if (this.burgerActive) {\n      this.navigation.closeMobileNav();\n    } else {\n      await this.navigation.openMobileNav();\n    }\n  }\n\n  private renderBurger() {\n    return (\n      <eon-ui-navigation-column>\n        <button\n          class={pfx({ \"toggle-mobile-nav\": true, active: this.burgerActive })}\n          onClick={(event: MouseEvent) => this.handleBurgerClick(event)}\n        >\n          <span id=\"hamburger-icon\">\n            <span class=\"line line-1\"></span>\n            <span class=\"line line-2\"></span>\n            <span class=\"line line-3\"></span>\n          </span>\n        </button>\n      </eon-ui-navigation-column>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav\n          aria-label=\"Navigation Main\"\n          class={pfx({\n            \"navigation-main-wrapper\": true\n          })}\n        >\n          <div class={pfx(\"navigation-main-inner\")}>\n            {this.burgerPosition === NAVIGATION_MAIN_BURGERPOSITION_LEFT && this.renderBurger()}\n            <slot />\n            {this.burgerPosition === NAVIGATION_MAIN_BURGERPOSITION_RIGHT && this.renderBurger()}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAoB,0jiDAC1B,MAAAC,EAAeD,E,MCgBFE,EAAc,M,oFASwB,M,oBAKRC,C,CAOzC,iBAAAC,GACEC,KAAKC,sB,CAGP,oBAAAA,GACED,KAAKE,WAAaC,SAASC,eAAe,mB,CAG5C,uBAAMC,CAAkBC,GACtBN,KAAKO,YAAYC,OACjBF,EAAOG,iBAEP,GAAIT,KAAKU,aAAc,CACrBV,KAAKE,WAAWS,gB,KACX,OACCX,KAAKE,WAAWU,e,EAIlB,YAAAC,GACN,OACEC,EAAA,gCACEA,EAAA,UACEC,MAAOC,EAAI,CAAE,oBAAqB,KAAMC,OAAQjB,KAAKU,eACrDQ,QAAUC,GAAsBnB,KAAKK,kBAAkBc,IAEvDL,EAAA,QAAMM,GAAG,kBACPN,EAAA,QAAMC,MAAM,gBACZD,EAAA,QAAMC,MAAM,gBACZD,EAAA,QAAMC,MAAM,kB,CAOtB,MAAAM,GACE,OACEP,EAACQ,EAAI,CAAAC,IAAA,4CACHT,EAAA,OAAAS,IAAA,wDACa,kBACXR,MAAOC,EAAI,CACT,0BAA2B,QAG7BF,EAAA,OAAAS,IAAA,2CAAKR,MAAOC,EAAI,0BACbhB,KAAKwB,iBAAmB1B,GAAuCE,KAAKa,eACrEC,EAAA,QAAAS,IAAA,6CACCvB,KAAKwB,iBAAmBC,GAAwCzB,KAAKa,iB"}