{"version":3,"names":["ACCORDION_MODE_SINGLE","ACCORDION_MODE_MULTIPLE","createSchemes","newSchemes","AllColors.ACCORDION_SCHEMES","forEach","element","schemeName","backgroundColor","AllColors","toConstantCase","textColor","hoverTextColor","activeAccordionBackgroundColor","activeAccordionBarColor","AllColors.COLOR_BRIGHT","accordionHoverColor","borderHoverColor","AllColors.COLOR_BRIGHT_OPACITY_40","scheme","ACCORDION_SCHEME_CONFIG","ACCORDION_SCHEME_MAP","Map","Object","entries","createAccordionMapDefinition","map","background","config","accordionCss","EonUiAccordionStyle0","Accordion","this","schemeConfig","schemeMap","paneHeaders","accordionContainers","componentWillLoad","applyScheme","size","isMobile","isTablet","panes","Array","from","hostElement","children","isDesktopOrLarger","mode","expandAll","updateInternalPaneIndexes","expandOrCollapsePanes","setMultipleMode","componentDidLoad","setCssVariables","accordionLoad","emit","detectSlotChanges","onWindowResize","onDocumentClick","document","activeElement","tagName","toLowerCase","highlightPane","applySchemeDelegate","setCssVariablesDelegate","innerBackground","activeScheme","onModeChanged","expandOnDesktop","selectedPaneIndex","internalSelectedPaneIndexes","pane","index","setActive","push","preventInternalIndexUpdate","_a","split","Number","delegatePaneStates","length","includes","openPane","closePane","forceRender","togglePaneIndexes","paneIndex","accordionPaneClosed","accordionPaneOpened","scrollToPane","filter","e","updateSelectedPaneIndexProperty","value","setAttribute","String","window","setTimeout","checkVisibility","scrollIntoView","behavior","block","rect","getBoundingClientRect","top","left","toString","selectedPaneChanged","handlePaneHeaderClick","isActive","classList","remove","pfx","handleKeyDown","key","KeyIds","SPACE","ENTER","preventDefault","TAB","handlePaneHeaderFocus","highlightedPaneIndex","render","showIcon","h","Host","class","paneTitle","getAttribute","paneSlot","ref","el","accordion","active","iconPosition","noBackground","role","tabIndex","hidden","hidePaneTitleOnDesktop","onClick","onKeyDown","onFocus","name","accordionPaneCss","EonUiAccordionPaneStyle0","AccordionPane","onViewportChange","innerDiv","height","offsetHeight","detectMarkupChanges","querySelectorAll","elm","addEventListener","componentDidRender","toggleOverflow","overflowTimeout","clearTimeout","overflowVisible","style"],"sources":["src/components/accordion/constants/accordion-constants.ts","src/components/accordion/accordion.scss?tag=eon-ui-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordion-pane/accordion-pane.scss?tag=eon-ui-accordion-pane&encapsulation=shadow","src/components/accordion/accordion-pane/accordion-pane.tsx"],"sourcesContent":["import { AccordionSchemeDefinition } from \"./accordion-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createAccordionMapDefinition } from \"../../../utils/scheme-helper\";\n\nexport const ACCORDION_SIZE_LARGE = \"large\";\nexport const ACCORDION_SIZE_SMALL = \"small\";\nexport const ACCORDION_SIZE_REGULAR = \"regular\";\nexport const ACCORDION_SIZES = [ACCORDION_SIZE_LARGE, ACCORDION_SIZE_REGULAR, ACCORDION_SIZE_SMALL] as const;\n\nexport const ACCORDION_MODE_SINGLE = \"single\";\nexport const ACCORDION_MODE_MULTIPLE = \"multiple\";\nexport const ACCORDION_MODES = [ACCORDION_MODE_SINGLE, ACCORDION_MODE_MULTIPLE] as const;\n\nfunction createSchemes() {\n  let newSchemes: AllColors.AccordionSchemeConfiguration<AccordionSchemeDefinition> = {};\n  AllColors.ACCORDION_SCHEMES.forEach((element) => {\n    newSchemes[element.schemeName] = {\n      backgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n      textColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_FONT`],\n      hoverTextColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_FONT`],\n      activeAccordionBackgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n      activeAccordionBarColor: AllColors.COLOR_BRIGHT,\n      accordionHoverColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_SHADE_1`],\n      borderHoverColor: AllColors.COLOR_BRIGHT_OPACITY_40\n    };\n    if (element.scheme) {\n      newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n    }\n  });\n  return newSchemes;\n}\n\nexport const ACCORDION_SCHEME_CONFIG: AllColors.AccordionSchemeConfiguration<AccordionSchemeDefinition> = createSchemes();\n\nexport const ACCORDION_SCHEME_MAP: Map<BackgroundColor | \"default\", AccordionSchemeDefinition> = new Map(\n  Object.entries(createAccordionMapDefinition()).map(([background, config]) => [\n    background as BackgroundColor,\n    ACCORDION_SCHEME_CONFIG[config as string]\n  ])\n);\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$accordion-inner-spacing: 20px !default;\n$accordion-pane-highlight-bar-width: 4px !default;\n$accordion-hover-shadow: none !default;\n$accordion-active-shadow: none !default;\n$accordion-default-radius: 0 !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n:host {\n  display: block;\n  width: 100%;\n  overflow: visible;\n  max-width: 100%;\n  font-family: $font-family-base;\n}\n\n.#{$prefix}accordion-wrapper {\n  position: relative;\n  width: 100%;\n  height: auto;\n  overflow: visible;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .#{$prefix}accordion {\n    position: relative;\n    border-radius: $accordion-default-radius;\n    background: v(backgroundColor);\n    margin-top: 8px;\n    transition: box-shadow 300ms $transition-timing-function, background 300ms $transition-timing-function,\n      width 300ms $transition-timing-function;\n\n    &:first-child {\n      margin-bottom: 0;\n    }\n\n    &:first-of-type {\n      margin-top: var(--marginTop, 0);\n    }\n\n    .#{$prefix}accordion-inner {\n      position: relative;\n      border-radius: $accordion-default-radius;\n\n      @if $accordion-default-radius != 0 {\n        overflow: hidden;\n      }\n    }\n\n    &:hover:not(.#{$prefix}hide-shadow) {\n      background: v(activeAccordionBackgroundColor);\n\n      .#{$prefix}accordion-pane {\n        color: v(hoverTextColor);\n      }\n\n      eon-ui-icon {\n        fill: v(hoverTextColor);\n      }\n\n      box-shadow: $accordion-hover-shadow;\n\n      &:not(.#{$prefix}hide-shadow) {\n        z-index: 1;\n\n        &:not(.#{$prefix}force-hover-state) {\n          z-index: 2;\n        }\n      }\n    }\n\n    &.#{$prefix}active {\n      background-color: v(activeAccordionBackgroundColor);\n    }\n\n    &.#{$prefix}icon-left {\n      .#{$prefix}accordion-pane {\n        eon-ui-icon {\n          right: auto;\n          left: #{$accordion-inner-spacing};\n        }\n\n        .#{$prefix}paneTitle {\n          padding-left: calc(24px + $accordion-inner-spacing);\n          padding-right: 0;\n        }\n      }\n\n      .#{$prefix}accordion-content {\n        padding-left: calc(24px + $accordion-inner-spacing);\n\n        @include for-size(tablet) {\n          padding-left: calc(32px + #{$accordion-inner-spacing});\n        }\n      }\n    }\n\n    &.#{$prefix}no-background {\n      background: transparent;\n      width: calc(100% + $accordion-inner-spacing * 2);\n      padding-left: $accordion-inner-spacing;\n      padding-right: $accordion-inner-spacing;\n      transform: translateX(-$accordion-inner-spacing);\n\n      .#{$prefix}accordion-pane {\n        padding-left: 0;\n        padding-right: 0;\n\n        eon-ui-icon {\n          right: 0;\n          padding: 0;\n        }\n      }\n\n      .#{$prefix}accordion-content {\n        width: calc(100% + $accordion-inner-spacing * 2);\n        padding-left: 0;\n        padding-right: calc(24px + $accordion-inner-spacing);\n        transform: translateX(-$accordion-inner-spacing);\n      }\n\n      &:hover,\n      &.#{$prefix}force-hover-state,\n      &.#{$prefix}active {\n        background: v(backgroundColor);\n      }\n\n      &.#{$prefix}icon-left {\n        eon-ui-icon {\n          left: 0;\n          right: auto;\n        }\n\n        .#{$prefix}accordion-content {\n          padding-left: calc(24px + $accordion-inner-spacing);\n\n          @include for-size(tablet) {\n            padding-left: calc(32px + $accordion-inner-spacing);\n          }\n        }\n      }\n    }\n  }\n\n  .#{$prefix}accordion-pane {\n    position: relative;\n    color: v(textColor);\n    cursor: pointer;\n    text-align: left;\n    outline: none;\n    transition: color 300ms $transition-timing-function;\n\n    .#{$prefix}paneTitle {\n      padding-right: calc(24px + $accordion-inner-spacing);\n    }\n\n    svg,\n    eon-ui-icon {\n      position: absolute;\n      right: #{$accordion-inner-spacing};\n      padding-left: 8px;\n      padding-right: 8px;\n      top: 32px;\n      transform: translateY(-50%);\n      fill: v(textColor);\n\n      transition-property: all;\n      transition-timing-function: $transition-timing-function;\n      transition-delay: 0s;\n      transition-duration: 300ms;\n\n      @include for-size(desktop-or-smaller) {\n        top: 32px;\n      }\n\n      @include for-size(tablet-or-smaller) {\n        top: 28px;\n      }\n    }\n\n    &.#{$prefix}active {\n      svg,\n      eon-ui-icon {\n        transform: translateY(-50%) rotate(-180deg);\n        transform-origin: center center;\n      }\n    }\n\n    @include for-size(desktop-or-larger) {\n      &.#{$prefix}hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.#{$prefix}small,\n  &.#{$prefix}regular {\n    .#{$prefix}accordion-pane {\n      font-size: 16px;\n      line-height: 24px;\n      font-weight: $font-weight-bold;\n      padding-top: 16px;\n      padding-bottom: 16px;\n      padding-left: #{$accordion-inner-spacing};\n      padding-right: #{$accordion-inner-spacing};\n    }\n  }\n\n  &.#{$prefix}regular {\n    .#{$prefix}accordion-pane {\n      font-size: 18px;\n    }\n  }\n\n  &.#{$prefix}large {\n    .#{$prefix}accordion-pane {\n      font-size: 20px;\n      line-height: 30px;\n      font-weight: $font-weight-bold;\n      padding-top: 17px;\n      padding-bottom: 17px;\n      padding-left: #{$accordion-inner-spacing};\n      padding-right: calc(28px + $accordion-inner-spacing);\n    }\n\n    svg,\n    eon-ui-icon {\n      padding-left: 4px;\n      padding-right: 4px;\n\n      @include for-size(phone) {\n        padding-left: 8px;\n        padding-right: 8px;\n      }\n    }\n  }\n\n  .#{$prefix}accordion-content {\n    position: relative;\n    width: 100%;\n    height: auto;\n  }\n\n  .#{$prefix}view-without-icon {\n    &::after {\n      content: \"\";\n      height: 0px;\n    }\n\n    &:hover {\n      background-color: transparent;\n\n      .#{$prefix}accordion-inner {\n        &::before {\n          content: \"\" !important;\n          background-color: transparent !important;\n        }\n      }\n    }\n\n    &.#{$prefix}active {\n      background-color: transparent;\n\n      .#{$prefix}accordion-inner {\n        &::before {\n          content: \"\" !important;\n          background-color: transparent !important;\n        }\n      }\n    }\n\n    .#{$prefix}accordion-pane {\n      cursor: unset;\n\n      &:focus {\n        background-color: transparent;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport {\n  AccordionMode,\n  AccordionSchemeDefinition,\n  AccordionSchemeName,\n  AccordionSize\n} from \"./constants/accordion-types\";\nimport {\n  ACCORDION_MODE_MULTIPLE,\n  ACCORDION_MODE_SINGLE,\n  ACCORDION_SCHEME_CONFIG,\n  ACCORDION_SCHEME_MAP\n} from \"./constants/accordion-constants\";\nimport { KeyIds } from \"../../constants/keys\";\nimport { isDesktopOrLarger, isMobile, isTablet } from \"../../utils/screen-helper\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { detectSlotChanges } from \"../../utils/slot-helper\";\nimport { AccordionSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot [dynamic] - Accordion uses a dynamic number of named slots, each holding a single eon-ui-accordion-pane as child. Use a unique slot name per pane! Panes have a single (unnamed) slot and may hold any number of HTML content.\n */\n@Component({\n  tag: \"eon-ui-accordion\",\n  styleUrl: \"accordion.scss\",\n  shadow: true\n})\nexport class Accordion implements ColorableComponent<AccordionSchemeConfiguration<AccordionSchemeDefinition>> {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: AccordionSchemeConfiguration<AccordionSchemeDefinition> = ACCORDION_SCHEME_CONFIG;\n  schemeMap = ACCORDION_SCHEME_MAP;\n  private paneHeaders: HTMLElement[] = [];\n  private accordionContainers: HTMLElement[] = [];\n  private preventInternalIndexUpdate: boolean;\n\n  /**\n   * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @State() activeScheme: AccordionSchemeDefinition;\n  @State() panes: Array<HTMLEonUiAccordionPaneElement>;\n  @State() highlightedPaneIndex: number = -1;\n  @State() isDesktopOrLarger: boolean;\n  @State() forceRender: boolean;\n  @State() internalSelectedPaneIndexes: number[] = [];\n\n  @Element() hostElement: HTMLEonUiAccordionElement;\n\n  /**\n   * The name of the color scheme of the component.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @Prop({ reflect: true }) scheme: AccordionSchemeName;\n\n  /**\n   * Represents the internal color of the component.\n   * It will be read by colorable-component.ts getColorOfNearestBackground() function to realize\n   * the detection of backgrounds inside of components, hidden by shadow dom.\n   * @disableControlInStorybook true\n   */\n  @Prop({ reflect: true, mutable: true }) innerBackground: string;\n\n  /**\n   * Sets this to a (zero-based) index of an accordion pane to select it.\n   */\n  @Prop({ reflect: true, mutable: true }) selectedPaneIndex: string = \"\";\n\n  /**\n   * The size of the accordion component\n   */\n  @State() size: AccordionSize;\n\n  /**\n   * Defines whether one or more panes can be visible.\n   */\n  @Prop() mode: AccordionMode = ACCORDION_MODE_SINGLE;\n\n  /**\n   * Expands or collapses all panes.\n   */\n  @Prop({ mutable: true }) expandAll: boolean = false;\n\n  /**\n   * If set to true, the \"Collapse/Expand\" icons are hidden on Desktop or larger viewports and the accordion panes are always expanded.\n   * This will overrule the \"mode\" Prop (if set to single).\n   */\n  @Prop() expandOnDesktop: boolean = false;\n\n  /**\n   * If set to true, the pane titles will be hidden on desktop mode if \"expandOnDesktop\" is set.\n   */\n  @Prop() hidePaneTitleOnDesktop: boolean = false;\n\n  /**\n   * Icon position\n   */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /**\n   * No-Background option\n   */\n  @Prop() noBackground: boolean = false;\n\n  /**\n   * Raised when the accordion has been loaded.\n   */\n  @Event() accordionLoad: EventEmitter;\n\n  /**\n   * Raised after the active pane changed. Returns the index of the active pane.\n   */\n  @Event() selectedPaneChanged: EventEmitter<string>;\n\n  /**\n   * Raised after a pane has been opened.\n   */\n  @Event() accordionPaneOpened: EventEmitter<number>;\n\n  /**\n   * Raised after a pane has been closed.\n   */\n  @Event() accordionPaneClosed: EventEmitter<number>;\n\n  componentWillLoad() {\n    this.applyScheme();\n    this.size = isMobile() ? \"small\" : isTablet() ? \"regular\" : \"large\";\n    this.panes = Array.from(this.hostElement.children as HTMLCollectionOf<HTMLEonUiAccordionPaneElement>);\n    this.isDesktopOrLarger = isDesktopOrLarger();\n    if (this.mode === ACCORDION_MODE_SINGLE) {\n      this.expandAll = false;\n    }\n    this.updateInternalPaneIndexes();\n    this.expandOrCollapsePanes();\n    this.setMultipleMode();\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n    this.accordionLoad.emit();\n\n    detectSlotChanges(() => {\n      this.panes = Array.from(this.hostElement.children as HTMLCollectionOf<HTMLEonUiAccordionPaneElement>);\n    }, this.hostElement);\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.isDesktopOrLarger = isDesktopOrLarger();\n\n    this.size = isMobile() ? \"small\" : isTablet() ? \"regular\" : \"large\";\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  onDocumentClick() {\n    if (document.activeElement.tagName.toLowerCase() !== \"eon-ui-accordion\") {\n      this.highlightPane(null);\n    }\n  }\n\n  @Watch(\"scheme\")\n  applyScheme() {\n    applySchemeDelegate(this);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n    this.innerBackground = this.activeScheme.activeAccordionBackgroundColor;\n  }\n\n  @Watch(\"mode\")\n  onModeChanged() {\n    if (this.mode === ACCORDION_MODE_SINGLE) {\n      this.expandAll = false;\n      this.expandOrCollapsePanes();\n    }\n  }\n\n  @Watch(\"expandAll\")\n  @Watch(\"isDesktopOrLarger\")\n  @Watch(\"expandOnDesktop\")\n  expandOrCollapsePanes() {\n    const expandAll = (this.isDesktopOrLarger && this.expandOnDesktop) || this.expandAll;\n    if (this.panes && !this.selectedPaneIndex) {\n      this.internalSelectedPaneIndexes = [];\n\n      this.panes.forEach((pane, index) => {\n        this.setActive(pane, expandAll);\n        if (expandAll) {\n          this.internalSelectedPaneIndexes.push(index);\n        }\n      });\n    }\n  }\n\n  @Watch(\"expandOnDesktop\")\n  @Watch(\"expandAll\")\n  setMultipleMode() {\n    if (this.expandAll || this.expandOnDesktop) this.mode = \"multiple\";\n  }\n\n  @Watch(\"selectedPaneIndex\")\n  updateInternalPaneIndexes() {\n    // skip internalSelectedPaneIndexes update if selectedPaneIndex has been set based on it (prevent recursion)\n    if (!this.preventInternalIndexUpdate) {\n      this.internalSelectedPaneIndexes = this.selectedPaneIndex ? this.selectedPaneIndex?.split(\",\").map(Number) : [];\n    }\n\n    this.preventInternalIndexUpdate = false;\n    this.delegatePaneStates();\n  }\n\n  delegatePaneStates() {\n    for (var index = 0; index < this.panes.length; index++) {\n      if (this.internalSelectedPaneIndexes.includes(index)) {\n        this.openPane(index);\n      } else {\n        this.closePane(index);\n      }\n    }\n\n    // Toggling the same pane doesn't change the selectedPaneIndex and the component wouldn't rerender without this additional state change.\n    // This would lead to the \"collapse/expand icon\" not being updated.\n    this.forceRender = !this.forceRender;\n  }\n\n  togglePaneIndexes(paneIndex: number) {\n    switch (this.mode) {\n      case ACCORDION_MODE_SINGLE: {\n        if (this.internalSelectedPaneIndexes.includes(paneIndex)) {\n          this.accordionPaneClosed.emit(paneIndex);\n          this.internalSelectedPaneIndexes = [];\n        } else {\n          this.accordionPaneOpened.emit(paneIndex);\n          this.internalSelectedPaneIndexes = [paneIndex];\n          this.scrollToPane(this.panes[paneIndex]);\n        }\n        break;\n      }\n      case ACCORDION_MODE_MULTIPLE: {\n        if (this.internalSelectedPaneIndexes.includes(paneIndex)) {\n          this.accordionPaneClosed.emit(paneIndex);\n          this.internalSelectedPaneIndexes = this.internalSelectedPaneIndexes.filter((e) => e !== paneIndex);\n        } else {\n          this.accordionPaneOpened.emit(paneIndex);\n          this.internalSelectedPaneIndexes.push(paneIndex);\n        }\n        break;\n      }\n    }\n    this.updateSelectedPaneIndexProperty();\n    this.delegatePaneStates();\n  }\n\n  private openPane(paneIndex: number) {\n    const pane = this.panes[paneIndex];\n    this.setActive(pane, true);\n  }\n\n  private closePane(paneIndex: number) {\n    const pane = this.panes[paneIndex];\n    this.setActive(pane, false);\n  }\n\n  private setActive(pane: HTMLEonUiAccordionPaneElement, value: boolean) {\n    pane.setAttribute(\"is-active\", String(value));\n  }\n\n  private scrollToPane(pane) {\n    window.setTimeout(() => {\n      if (!this.checkVisibility(pane)) {\n        pane.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      }\n    }, 300);\n  }\n\n  private checkVisibility(pane) {\n    const rect = pane.getBoundingClientRect();\n\n    return rect.top >= 0 && rect.left >= 0;\n  }\n\n  private updateSelectedPaneIndexProperty() {\n    this.preventInternalIndexUpdate = true;\n    this.selectedPaneIndex = this.internalSelectedPaneIndexes.toString();\n    this.selectedPaneChanged.emit(this.selectedPaneIndex);\n  }\n\n  private handlePaneHeaderClick(index: number) {\n    this.togglePaneIndexes(index);\n    if (!this.panes[index].isActive)\n      this.accordionContainers[index].classList.remove(pfx(\"force-hover-state\").toString());\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index) {\n    switch (e.key) {\n      case KeyIds.SPACE:\n      case KeyIds.ENTER:\n        this.togglePaneIndexes(index);\n        e.preventDefault();\n        break;\n      case KeyIds.TAB:\n        this.highlightPane(index === this.panes.length - 1 ? -1 : index);\n        break;\n      default:\n        break;\n    }\n  }\n\n  private handlePaneHeaderFocus(index: number) {\n    this.highlightPane(index);\n  }\n\n  private highlightPane(index?: number) {\n    if (this.isDesktopOrLarger && this.expandOnDesktop) {\n      return;\n    }\n    this.highlightedPaneIndex = index != null ? index : -1;\n  }\n\n  render() {\n    const size = this.size;\n    const showIcon = !this.isDesktopOrLarger || !this.expandOnDesktop;\n    return (\n      <Host>\n        <div class={pfx({ \"accordion-wrapper\": true, [size]: true })}>\n          {this.panes.map((pane: HTMLEonUiAccordionPaneElement, index: number) => {\n            const paneTitle = pane.getAttribute(\"pane-title\");\n            const paneSlot = pane.getAttribute(\"slot\");\n            return (\n              <div\n                ref={(el) => this.accordionContainers.push(el)}\n                class={pfx({\n                  accordion: true,\n                  active: pane.isActive,\n                  \"view-without-icon\": !showIcon,\n                  \"force-hover-state\": showIcon && index === this.highlightedPaneIndex,\n                  \"hide-shadow\": this.expandOnDesktop && isDesktopOrLarger(),\n                  [`icon-${this.iconPosition}`]: true,\n                  \"no-background\": this.noBackground\n                })}\n              >\n                <div\n                  class={pfx({\n                    \"accordion-inner\": true\n                  })}\n                >\n                  <div\n                    role={showIcon && \"button\"}\n                    ref={(el) => this.paneHeaders.push(el)}\n                    tabIndex={0}\n                    class={pfx({\n                      active: pane.isActive,\n                      \"accordion-pane\": true,\n                      hidden: this.expandOnDesktop && this.hidePaneTitleOnDesktop\n                    })}\n                    onClick={() => showIcon && this.handlePaneHeaderClick(index)}\n                    onKeyDown={(e: KeyboardEvent) => this.handleKeyDown(e, index)}\n                    onFocus={() => this.handlePaneHeaderFocus(index)}\n                    aria-expanded={pane.isActive ? \"true\" : \"false\"}\n                  >\n                    <div class={pfx({ paneTitle: true })}>{paneTitle}</div>\n                    {showIcon && <eon-ui-icon name=\"chevron_small_down\" no-space=\"true\"></eon-ui-icon>}\n                  </div>\n                  <div\n                    class={pfx({\n                      active: pane.isActive,\n                      \"accordion-content\": true\n                    })}\n                  >\n                    <slot name={paneSlot}></slot>\n                  </div>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$accordion-inner-spacing: 20px !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n:host {\n  @include slotted-margins(\"*:not([slot])\");\n}\n\n.#{$prefix}accordionitem-content {\n  position: relative;\n  width: 100%;\n  height: 0px;\n  color: v(textColor);\n  font-family: $font-family-base;\n  box-sizing: border-box;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n\n  transition-property: all;\n  transition-timing-function: $transition-timing-function;\n  transition-delay: 0s;\n  transition-duration: 300ms;\n\n  &.#{$prefix}overflow-visible {\n    overflow: visible;\n\n    .#{$prefix}accordionitem-content-inner {\n      overflow: visible;\n    }\n  }\n\n  &.#{$prefix}active {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  .#{$prefix}accordionitem-content-inner {\n    position: relative;\n    padding-top: 8px;\n    padding-right: #{$accordion-inner-spacing};\n    padding-bottom: #{$accordion-inner-spacing};\n    padding-left: #{$accordion-inner-spacing};\n    overflow: hidden;\n    display: block;\n  }\n}\n\n::slotted(eon-ui-headline) {\n  color: v(textColor);\n}\n","import { Component, h, Prop, Element, State, Listen, Watch } from \"@stencil/core\";\nimport pfx from \"../../../utils/style-class-prefix-helper\";\nimport { detectMarkupChanges, detectSlotChanges } from \"../../../utils/slot-helper\";\n// import { InitLogging } from \"../../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-accordion-pane\",\n  styleUrl: \"accordion-pane.scss\",\n  shadow: true\n})\nexport class AccordionPane {\n  // @InitLogging() sentryTransaction;\n  private innerDiv: HTMLElement;\n  private overflowTimeout: any;\n\n  @State() height: number;\n  @State() overflowVisible: boolean = false;\n\n  /**\n   * Defines the name of the accordion\n   */\n  @Prop() paneTitle: string;\n\n  /**\n   * Determines whether the accordion is active or not\n   */\n  @Prop() isActive: boolean = false;\n\n  @Element() hostElement: HTMLEonUiAccordionPaneElement;\n\n  @Listen(\"resize\", { target: \"window\" })\n  onViewportChange() {\n    /**\n     * When pane is in \"expand\" mode then while toggling between viewports, the height of the pane remains static (which should not be the case per viewport),\n     * So updating the height of pane on every viewport toggle to avoid any height mismatch issue.\n     */\n    if (this.innerDiv) {\n      this.height = -1;\n      this.height = this.innerDiv.offsetHeight;\n    }\n  }\n\n  componentDidLoad() {\n    detectMarkupChanges(() => {\n      this.height = -1;\n      this.height = this.innerDiv.offsetHeight;\n    }, this.hostElement);\n\n    detectSlotChanges(() => {\n      this.height = -1;\n      this.height = this.innerDiv.offsetHeight;\n    }, this.hostElement);\n\n    this.hostElement.querySelectorAll(\"EON-UI-IMAGE\").forEach((elm) => {\n      elm.addEventListener(\"imageSrcLoaded\", () => {\n        this.height = -1;\n        this.height = this.innerDiv.offsetHeight;\n      });\n    });\n  }\n\n  componentDidRender() {\n    /**\n     * This produces a Stencil warning regarding a possible render-loop.\n     * This is intended here - we need a rerender after the inner div has been rendered to get its real height.\n     * After that, the state will update and the item will rerender again but this time Stencil detects that the value didn't change anymore.\n     * Therefore, this will NOT result in a render loop and the warning can be ignored safely.\n     */\n    this.height = this.innerDiv.offsetHeight;\n  }\n\n  @Watch(\"isActive\")\n  toggleOverflow() {\n    if (this.overflowTimeout) clearTimeout(this.overflowTimeout);\n    if (this.isActive) {\n      this.overflowTimeout = setTimeout(() => {\n        this.overflowVisible = true;\n      }, 300); // 300ms is aligned with the css transition time\n    } else {\n      this.overflowVisible = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={pfx({\n          \"accordionitem-content\": true,\n          active: this.isActive,\n          \"overflow-visible\": this.overflowVisible\n        })}\n        style={{\n          height: `${this.isActive && this.height ? this.height : 0}px`\n        }}\n      >\n        <div ref={(el) => (this.innerDiv = el as HTMLElement)} class={pfx(\"accordionitem-content-inner\")}>\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}